vue/html+qrcode生成付款二维码(前端部分)

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,当url改变时生成二维码(不包括第一次)
            url: {
                handler(newValue) {
                    this.link = newValue
                    this.$nextTick(()=>{
                        this.createQRCode()
                    })
                    // console.log(this.link)
                },
            },
        },
        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') //向webview所在页面的进程传达消息
       setTimeout(()=>{
           ipcRenderer.sendToHost('finished')
       },100)
   }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

trabecula_hj

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值