Vue——前端生成二维码

.npm安装qrcode：npm install --save qrcodejs2

• main.js中import引入：import QRCode from 'qrcodejs2'

• 使用：完整代码：

    <template>
      <div class="conten-box">
        <div id="qrcode" ref="qrCodeUrl"></div>
      </div>
    </template>
    <script>
    import QRCode from "qrcodejs2";
    export default {  
    name: "qrcode", 
     data() {  
      return {    
      qrcode: ""   
     }; 
     },  
    methods: {   
     creatQrCode() {   
       var qrcode = new QRCode(this.$refs.qrCodeUrl,
     {    text: "https://www.baidu.com", // 二维码地址  
          width: 200, 
           height: 200, 
           colorDark: "#000000",  
          colorLight: "#ffffff", 
           correctLevel: QRCode.CorrectLevel.H   
       });   
     },
    //清空二维码
     isShowOpen (topId) {    
      const codeHtml = document.getElementById("qrcode");    
      codeHtml.innerHTML = "";  
      },
     }, 
     mounted() {  
      this.creatQrCode();  
    }};
    </script>
    <style scoped>
    </style>

**

注意：在接口中调用生成二维码的话要等div生成完之后再调用，否则报错：

报错解决：vue.esm.js?efeb:1897 TypeError: Cannot read property 'appendChild' of undefined

 this.$nextTick(() => {     
     this.creatQrCode(); //调用生成二维码方法  
      })

　　就有了下面的效果：