首页 > 编程知识 正文

vue2实现二维码,如何实现二维数组

时间:2023-05-04 14:52:32 阅读:286737 作者:477

一.使用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 = "";

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。