VUE 生成二维码插件

qrcodejs2
1，安装 qrcodejs2 （注意：安装的是qrcodejs2，不要安装qrcode —> 会报错）

npm install  qrcodejs2 --save

2，页面中引入

<script> 

    import QRCode  from "qrcodejs2"
    
    export default {
    
       data() {
    		return{
          		link: "我是二维码"
   		 }
  	},

        components: { QRCode }
        
    }

</script>

3，DOM结构

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

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();
    })