vue 用qrcode生成二维码

1. 下载qrcode包 npm install qrcode --save

2. 封装组件

<template>
        <div>
                <canvas :id="date.canvasId">
        </div>
</template>

<script>

import QRCodefrom 'qrcode';
export default {
            name:'qrcode',
            data(){
                return {
                    date:{
                            url:"error",
                            canvasId:"canvasId",
                      },
                }
            },
            components: {
                    QRCode: QRCode
            },
            methods: {
                    useqrcode(date){
                            this.date = date;
                            this.$nextTick(function () {
                                    var canvas =document.getElementById(this.date.canvasId)
                                    QRCode.toCanvas(canvas, this.date.url,{
                                        width:150,
                                        height:150,
                                    },function (error) {
                                            if (error)console.error(error)                                     
                                    })
                        })
                }
     },
}
</script>

3. 在父组件调用useqrcode并传入url，id数据即可