<template>
<view class="flex-c-c">
<canvas :id="canvasId" :canvas-id="canvasId" :type="canvasType"
:style="{width: size+'rpx',height:size+'rpx'}" />
</view>
</template>
<script>
import UQRCode from 'uqrcodejs'
import {
getSystemData
} from '@/utils/public.js'
export default {
name: 'qrCodeCmp',
props: {
size: {
type: Number,
default: 228
},
// 二维码生成内容
value: {
type: String,
default: ''
},
canvasId: {
type: String,
default: 'qrcode'
}
},
watch: {
value: {
handler(val) {
if (val) {
this.drawQrcode(val)
}
},
immediate: true
}
},
data() {
return {
// #ifdef APP-VUE
canvasType: undefined,
// #endif
// #ifndef APP-VUE
canvasType: '2d',
// #endif
}
},
methods: {
async drawQrcode(val) {
const qr = new UQRCode();
qr.data = val;
qr.size = uni.upx2px(this.size);
qr.areaColor = 'transparent'
// #ifdef H5
this.$nextTick(async () => {
// #endif
qr.make();
let canvasContext = null;
// #ifdef MP-WEIXIN
const canvas = (this.canvas = await new Promise(resolve => {
uni
.createSelectorQuery()
.in(this) // 在组件内使用需要
.select(`#${this.canvasId}`)
.fields({
node: true,
size: true
})
.exec(res => {
resolve(res[0].node);
});
}));
canvasContext = canvas.getContext('2d');
/* 使用dynamicSize+scale,可以解决小块间出现白线问题,dpr可以解决模糊问题 */
const dpr = getSystemData().pixelRatio;
canvas.width = qr.dynamicSize * dpr;
canvas.height = qr.dynamicSize * dpr;
canvasContext.scale(dpr, dpr);
// #endif
// #ifndef MP-WEIXIN
canvasContext = this.canvasContext = uni.createCanvasContext(this.canvasId,
this);
// #endif
// 组件内调用需传this,vue3 中 this 为 getCurrentInstance()?.proxy
qr.canvasContext = canvasContext;
qr.drawCanvas();
// #ifdef H5
})
// #endif
}
}
}
</script>
使用方法
<qrCodeCmp :size="228" :value="combiBarCode[item.couponId]" :canvasId="'qrcode-'+item.coundownTime" />