Vue 导入qrcodejs2库生成二维码

1.下载安装qrcodejs2包

 npm i qrcodejs2

2.导入

import QRCode from "qrcodejs2";

3.html

<div class="qrcode" id="qrcode"></div>  //class是我的样式可以忽略，但是id一定要下

 

4.使用，以下是我的代码，需求是该页面就会显示二维码，我用的是search方法，然后在create中进行回调函数的使用

     methods: {
        search() {
                var qrcode = new QRCode("qrcode", {
                text: 'www.baidu.com',  //表示内容，可以是地址或者是文字'55566'或者参数
                colorDark : "#000000",  //前景色
                colorLight : "#ffffff",   //背景色
                correctLevel : QRCode.CorrectLevel.H   //容错级别
                } 
             }，
    created(){
        this.$nextTick (function () { 
            this.search();        
        }) 
    },
    mounted() {
    }, 
  

 说一下：nexttick异步更新，如果不使用的话再create钩子函数中Dom 操作还没被渲染，所以一定要将DOM操作的js代码放进 
                Vue.nextTick()的回调函数中。

没加nexttick之前我的二维码显示不出来，解决方法就是nexttick就可以。

 

同时也可以使用其他的方法：

qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码

若有什么错误欢迎纠正！