1.Vue项目中如何使用qrcode生成付款二维码
一、安装qrcode.js
npm install qrcodejs2
二、新建qrcode.vue组件
<template>
<div>
<div id="qrcode" ref="qrCodeUrl">
</div>
</div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
name: "qrCode",
data(){
return{
link:'',
qrcode:{}
}
},
props:{
url:{
type:String,
default:''
}
},
watch: {
url: {
handler(newValue) {
this.link = newValue
this.$nextTick(()=>{
this.createQRCode()
})
},
},
},
methods:{
createQRCode(){
this.qrcode = new QRCode(this.$refs.qrCodeUrl,{
text:this.link,
width:160,
height:160,
colorDark: '#000000',
colorLight: '#ffffff'
})
}
},
beforeDestroy(){
if(this.qrcode){
this.qrcode.clear()
}
this.$refs.qrCodeUrl.innerHTML = ''
}
}
</script>
<style scoped>
</style>
三、项目中引入组件
import QRCodeView from '../../components/qrCode'
components: {
QRCodeView
},
<QRCodeView :url="url"></QRCodeView>
2.Html项目中如何使用
<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<div class="right-wrap">
<div ref="qrCodeUrl"></div>
</div>
createQrCode(name){
this.qrcode = new QRCode(this.$refs.qrCodeUrl,{
text:name,
width:160,
height:160,
colorDark: '#000000',
colorLight: '#ffffff'
})
ipcRenderer.sendToHost('pong')
setTimeout(()=>{
ipcRenderer.sendToHost('finished')
},100)
}