大佬教程收集整理的这篇文章主要介绍了【Vue】二维码生成，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
按组长提供的样例，功能比较相符合的是这个博客：
https://www.jianshu.com/p/8d59107e1992
这个博客引用的是这篇文章：
https://blog.csdn.net/wwqqqq123/article/details/90261994
如何使用和参数说明很清楚，这里我就直接贴我写的DEMO
东西还没要求要弄上去，但是我自己先弄出来，怕后面需求变动又说需要了
首先主界面会放一个对话框：
<el-dialog
v-if="qrCodeVisible"
title="二维码生成"
:append-to-body="true"
:visible.sync="qrCodeVisible"
width="450px"
class="roll-dialog"
>
<qr-code-page :rooms="changedList" />
</el-dialog>
会传递选中的房间列表数据
logo随便引用一个小图标
大小200像素
text属性就是存储的参数，因为不确定传什么，先放上场所编号和房间号
因为是房间列表，所以传递若干个房间，用div包裹组件再遍历
<template>
<div>
<div
class="qrCode-border"
v-for="(room, idx) in rooms"
:key="idx"
align="center"
>
<h3>房号：{{room.roomNo}}</h3>
<vue-qr
:logo-src="logoSrc"
:size="200"
:auto-color="true"
:dot-scale="1"
:text="room.placeCode + '-' + room.roomNo"
/>
</div>
</div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
name: 'QrCodePage',
components: {
VueQr
},
props: {
rooms: {
type: Array,
default() {
return []
}
}
},
data() {
return {
logoSrc: '/favicon.ico'
}
}
}
</script>
<style scoped>
.qrCode-border {
margin: 20px 0px;
}
</style>
解决对话框过长的问题，设置对话框的滚动条
https://blog.csdn.net/qq_32837111/article/details/121248211
效果：
以上是大佬教程为你收集整理的【Vue】二维码生成全部内容，希望文章能够帮你解决【Vue】二维码生成所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。