获取支付链接转化为二维码

链接转为二维码，需要安装vue-qrcodenpm install vue-qrcode

装二维码的容器：

<div class="amount" v-show="amount"><div class="amount_text">金额：{{ selected.price }} 元</div><div class="amount_img"><canvas ref="qrCanvas"></canvas></div>
</div>

将链接转化为二维码：

import QRCode from 'qrcode'
const qrCanvas = ref(null)
const codeUrl = ref(null)
const handleQR = (codeUrl) => {if (qrCanvas.value) {QRCode.toCanvas(qrCanvas.value, codeUrl, (error) => {if (error) console.error(error)})} else {console.error('Canvas element is undefined')}
}

完整代码：

<div class="amount" v-show="amount"><div class="amount_text">金额：{{ selected.price }} 元</div><div class="amount_img"><canvas ref="qrCanvas"></canvas></div>
</div>import QRCode from 'qrcode'
const qrCanvas = ref(null)
const codeUrl = ref(null)//二维码
const handleQR = (codeUrl) => {if (qrCanvas.value) {QRCode.toCanvas(qrCanvas.value, codeUrl, (error) => {if (error) console.error(error)})} else {console.error('Canvas element is undefined')}
}
//获取链接
const handleAmount = async (item) => {await axios.get(`/api/pay/native/${item.id}`).then((response) => {codeUrl.value = response.data.data.codeUrlhandleQR(codeUrl.value)//调用 将链接转化为二维码}).catch((error) => {})
}