生成二维码
用于vue项目通过字符串转换生成二维码的三方插件
安装插件
npm install --save qrcode
引入使用
import QRCode from "qrcode"
页面
<!-- 放置二维码的容器-->
<canvas :id="'qrCode_id' + stringxxxxx" class="qrCode_style"></canvas>
<!-- 可为二维码添加点击事件（点击查看大图）-->
<!-- @click="qrClick('qrCode_id' + stringxxxxx, 'single')"-->
样式
.qrCode_style {
width: 100px !important;
height: 100px !important;
}
方法
通过放置canvas填充内容方式实现
methods:{
// 生成二维码方法（核心方法）
qrFunction(id, qrString) {
console.log('调用', id)
let opts = {
errorCorrectionLevel: 'H', //容错级别
type: 'image/png', //生成的二维码类型
quality: 1, //二维码质量
margin: 2, //二维码留白边距
width: 900, //宽
height: 900, //高
text: '', //二维码内容
color: {
dark: '#333333', //前景色
light: '#fff', //背景色
},
}
this.QRCodeMsg = qrString //生成的二维码为URL地址js
// this.QRCodeMsg = Math.random() + '' //生成的二维码为URL地址js
let msg = document.getElementById(id)
// 将获取到的数据（val）画到msg（canvas）上
QRCode.toCanvas(msg, this.QRCodeMsg, opts, (error) => {
// this.getBase64Image(id)
})
},
// 点击查看大图方法（可选）
qrClick(id, ref) {
this.urls = []
this.urls.push(this.getBase64Image(id))
/**查看大图方法
**
** 写这里
**
*/
},
// 获取base64格式图片（可选）
getBase64Image(id) {
let canvas = document.getElementById(id)
// 使用画布生成 base64 的方法
let dataUrl = canvas.toDataURL('image/png')
return dataUrl
},
}
方法执行
// 找个地方执行方法
mounted() {
this.$nextTick(() => {
this.qrFunction('qrCode_id' + stringxxxxx, 内容)
})
},
上面的变量需要自己声明，查看大图的方法需要自己根据情况编写