QRCode.js是一个二维码生成javascript库;支持跨浏览器的HTML5 Canvas和表格标签的DOM操作;并且不依赖其它的库或拓展。
官网地址:https://davidshimjs.github.io/qrcodejs/
安装方式:(qrcode.js有两个版本我用的是第二版)
npm i qrcodejs2
实现效果:
实现思路:
将canvas部分拆分成组件 放入弹窗实现不同链接生成不同的二维码
html:
<el-button type="text" @click="seeCode(scope.row)">查看下载二维码</el-button>
<el-dialog title="扫码下载对应版本APP" :visible.sync="dialogVisible" width="300px">
<QrCode :id="'QrCode'" :codeUrl="codeUrl" />
</el-dialog>
JS
seeCode(item) {
//拼接访问下载链接 请求地址 + 请求路径
this.codeUrl = this.define.APIURl + JSON.parse(item.fileid_name)[0].url
//打开弹窗
this.dialogVisible = true
},
组件拆分:
<template>
<div style="width: 100%;height: 100%;" :id="id" :ref="id"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
data() {
return {
qrcode: ''
}
},
props: {
id: {
type: String,
required: true
},
codeUrl: {
type: String,
default: ''
},
width: {
type: String,
default: '200'
},
height: {
type: String,
default: '200'
},
colorDark: {
type: String,
default: '#000000'
},
colorLight: {
type: String,
default: '#ffffff'
}
},
watch: {
codeUrl(newText) {
this.createQrcode()
}
},
mounted() {
this.createQrcode()
},
methods: {
// 有新的二维码地址了,先把之前的清除掉
createQrcode() {
if (this.qrcode) {
this.$refs[this.id].innerHTML = ''
}
this.qrcode = new QRCode(this.$refs[this.id], {
text: this.codeUrl,
width: this.width,
height: this.height,
colorDark: this.colorDark,
colorLight: this.colorLight,
correctLevel: QRCode.CorrectLevel.H,
})
},
}
}
</script>
页面引入组件:
import QrCode from './QrCode.vue'
components: {QrCode },