VUE 生成二维码插件

qrcodejs2
1,安装 qrcodejs2 (注意:安装的是qrcodejs2,不要安装qrcode —> 会报错)

npm install  qrcodejs2 --save

2,页面中引入


3,DOM结构

4,JS 方法编写

export default {
    
       data() {
   			 return{
          			link: "我是二维码"
   			 }
	  },
        
        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'    // 前景色
                })
            }
        },

        components: { QRCode }
        
}

5,页面调用

//  注意: 在需要调用的地方  这样必须这样调用  否则会出现  appendChild  null  就是id为qrcode的dom获取不到 返回结果为null

    this.$nextTick (function () {
       this.qrcode();
    })

你可能感兴趣的:(VUE 生成二维码插件)