1.qrcode2.js vue3項(xiàng)目中報(bào)錯(cuò)扭勉，this不存在
2.qrcode.vue
npm i 'qrcode.vue'
import QrcodeVue from 'qrcode.vue'
export default defineComponent({
components: {
QrcodeVue
}
setup({
const bindQRCode = (index, item) => {
let mycanvas = document.getElementsByTagName('canvas')[index]
let img = convertCanvasToImage(mycanvas)
// img對(duì)象通過(guò)append方式添加到頁(yè)面上
canvasVisible.value = false
imgRef.value[index].setAttribute('src', img.src)
}
})
})
const printpage = () => {
if (props.printData) {
props.printData.forEach((item, index) => {
bindBarCode(index, item.waybillCode)
// 生成二維碼
bindQRCode(index, item)
})
}
setTimeout(() => {
window.Print('#printarea', {
onStart: function () {
console.log('onStart', new Date())
},
onEnd: function () {
console.log('onEnd', new Date())
updateBillStatus({ wayBillIdList: props.checkedId }).catch((err) => {
console.log(err)
})
context.emit('refreshEvent')
dataCloseVisible.value = false
context.emit('update:dataVisible', this.dataCloseVisible)
}
})
}, 1)
context.emit('changePrintLoading')
}
頁(yè)面上使用
<div>
<qrcode-vue v-if="canvasVisible" :value="`https://www.speedaf.com/${printItem.wayBillReceiver.countryCode.toLowerCase()}-${printItem.lang}/send-parcel?tradeNo=${printItem.waybillCode}`" :size="200" level="H" />
<img :ref="setRef" src="" alt="" />
</div>