Vue中使用二维码插件qrcodejs2生成二维码

1.安装 qrcodejs2

npm install  qrcodejs2 --save

2.在需要使用的组件内引入

<script> 

    import QRCode  from "qrcodejs2"
    
    export default {
        components: { QRCode },
        data(){
            link: 'https://baidu.com'
        },

        
        
    }

</script>

 

 3.指定显示二维码的DOM元素

<div id="qrcode" ></div>

4.创建生成二维码的方法

data(){
         link: 'https://baidu.com'
},
        
methods: {
//  生成二维码
    qrcode () {
        let that = this;
        let qrcode = new QRCode('qrcode', {
        width: 124,
        height: 124,        // 高度
        text:  this.link,   // 二维码内容
        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',   // 背景色
        // foreground: '#ff0'    // 前景色
        })
    }
},

5.调用

this.qrcode();