一.使用vue-qart npm安装 $ npm install vue-qart --save$ npm install vue-qart --save 引入 import VueQArt from 'vue-qart'components: {VueQArt} 相关配置 data () { return { config: { value: 'https://www.baidu.com', imagePath: './examples/assets/logo.png', filter: 'color' } }} 使用 <vue-q-art :config="config"></vue-q-art>

具体见文档说明 https://www.npmjs.com/package/vue-qart

二.使用qrcodejs2

npm安装qrcodejs2 npm install qrcodejs2 --savenpm install qrcodejs2 --save注：安装 qrcodejs2 而不是安装qrcode 引入 import QRCode from 'qrcodejs2'components: {QRCode} 页面调用 qrcode () { let qrcode = new QRCode('qrcode', { width: 232, // 设置宽度 height: 232, // 设置高度 text: 'https://baidu.com' }) }--------------------- 注：在需要调用的地方必须如下调用， 否则会出现 appendChild null （***就是id为qrcode的dom获取不到 返回结果为null***）this.$nextTick (function () { this.qrcode()})或者setTimeout(() => { this.qrcode()}, 80)--------------------- 使用 <div id="qrcode" ref="qrcode"></div> 注：

动态生成二维码，多次点击生产按钮，会重复生成多个二维码（如弹框中展示二维码）

解决方案如下：在关闭弹框时触发回调函数把div的内容清空

代码如下：document.getElementById("qrcode").innerHTML = "";

免责声明：文章源自网络，版权归原作者所有，如有侵犯联系删除。