vue2.0 用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)

                                            console.log('QRCode success!');

                                    })

                        })

                }

     },

}

</script>

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