vue项目生成二维码之qrcodejs2

首先第一步当然是安装了：

npm install qrcodejs2 --save，（有淘宝镜像的可以用cnpm进行安装）；

第二步：引入，哪个页面用到，在哪个页面引入

import QRCode from 'qrcodejs2';

然后直接用就可以了，

<template>

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

</template>

然后在method写入方法，一定要记住上面的id名和下面的参数名保持一致，就是我加粗的部分了

qrcode() {

      const qrcode = new QRCode('qrcode', {

        text: this.codeValue,

        colorDark: '#000',

        colorLight: '#fff',

      });

    }

最关键的一点，一定要在nextTick里面调用

this.$nextTick(() => {

          this.qrcode();

        });

如果你还是报错，报错还是这样的Error in nextTick: "TypeError: Cannot read property 'appendChild' of null"

那你就看看 this.qrcode();是在什么时候调用的，调用的时候dom 节点生成了吗？？

解决办法，就是生成dom 节点之后在调用

举个例子：

这个是在打开dialog框之后再调用这个方法的，用watch监听一下，保证是在打开dialog框之后调用

watch: {

    dialogVisible(val) {

      if (val) {

        this.$nextTick(() => {

          this.qrcode();

        });

      }

    }

  },

小伙伴们你们学会了吗？有问题请留言哦