VUE 生成二维码插件

时间:2021-02-28 19:55:07

原文:https://www.jianshu.com/p/496fd1cbee8d

npm install qrcodejs2 --save

页面中引入

dom 结构

JS 方法编写

export default {

    data(){
link: 'https://baidu.com'
}, methods: {
// 生成二维码
qrcode () {
let that = this;
let qrcode = new QRCode('qrcode', {
width: 124,
height: 124, // 高度
text: this.link, // 二维码内容
// render: 'canvas' , // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
// background: '#f0f', // 背景色
// foreground: '#ff0' // 前景色
})
}
}, components: { QRCode }

}

5)页面调用

// 注意: 在需要调用的地方 这样必须这样调用 否则会出现 appendChild null 就是id为qrcode的dom获取不到 返回结果为null

this.$nextTick (function () {
this.qrcode();
})

2、vue-qart

1) 安装 vue-qart

npm install vue-qart --save

页面中引入

data 中数据配置

export default {

    data(){
downloadButton:false,
config: {
value: 'https://baidu.com',
imagePath: '/static/logo/logo.png',
filter: 'color'
}
}, components: { VueQArt } }

dom 结构

3 实际项目中
3.1 引入文件
qrcodejs2---引入.jpg
3.2 生成二维码函数

生成二维码的函数.jpg

3.3 相应的位置调用函数