vue2.0 利用qrcodejs2插件实现二维码生成

#vue2.0 利用qrcodejs2插件实现二维码生成| 来源: 网络整理| 查看: 265

步骤： 1、安装qrcodejs2插件，在控制台输入：

npm install qrcodejs2 --save

*注意：这里安装的是qrcodejs2，不是qrcode，否则会报错

2、页面引入——在入口文件（默认是main.js）里引入：

import QRCode from 'qrcodejs2'

3、页面展示 ①：在对应的Html页面中，添加html标签

②：配置，在methods方法里配置：

qrcode () { let qrcode = new QRCode('qrcode',{ width: 200, // 设置宽度，单位像素 height: 200, // 设置高度，单位像素 text: 'https://www.baidu.com' // 设置二维码内容或跳转地址 }) }

③：调用

this.$nextTick(() => { this.qrcode() })

*注意，调用的时候必须保证此DOM为显示状态，否则会出现 *appendChild null错误，就是id为qrcode的dom获取不到，返回结果为null

4、效果图：这里写图片描述

【本文地址】

今日新闻