VUE：二维码生成插件 qrious 的使用 Cannot read property 'appendChild' of null

一、概述

二维码又称 QR Code，QR 全称 Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的 Bar Code 条形码（只能标识数字）能存更多的信息，也能表示更多的数据类型。

二、二维码优势

1、信息容量大, 可以容纳多达 1850 个大写字母或 2710 个数字或 500 多个汉字。

2、应用范围广, 支持文字,声音,图片,指纹等等。

3、容错能力强, 即使图片出现部分破损也能使用。

4、成本低, 容易制作。

三、二维码容错级别

L 级（低） 7％的码字可以被恢复。

M 级（中） 的码字的 15％可以被恢复。

Q 级（四分）的码字的 25％可以被恢复。

H 级（高） 的码字的 30％可以被恢复。

四、二维码生成插件 qrious

qrious 是一款基于 HTML5 Canvas 的纯 JS 二维码生成插件。通过 qrious.js 可以快速生成各种二维码，你可以控制二维码的尺寸颜色，还可以将生成的二维码进行 Base64 编码。

qrious.js 二维码插件的可用配置参数如下：

五、使用qrcode.js生成二维码

新建一个vue项目

1、安装

cnpm install --save qrcodejs2

2、引入

import QRCode from 'qrcodejs2'  // 引入qrcode

3、使用

修改Home.vue如下所示：

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

<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
  name: 'Home',
  mounted() {
    this.qrcode()
  },
  methods: {
    qrcode(){
      let qrcode = new QRCode('qrcode',{
        width: 132,
        height: 132,
        text: 'https://www.baidu.com',
        colorDark: "#000",
        colorLight: "#fff"
      })
    }
  }
}
</script>

注意：二维码的内容放在text中。

4、运行项目，访问http://localhost:8080/，效果如下：

 手机扫码即可跳转到百度首页。

六、如果报错：Cannot read property 'appendChild' of null

原因分析：div还没有生成，你就获取了div

解决办法：使用this.$nextTick（）方法，该在下次 DOM 更新循环结束之后执行延迟回调。

 

点击“二维码查看”，弹出如下对话框

代码如下：

<template>
  <el-dialog title="二维码查看" :visible.sync="dialogFormVisible" width="600px" @close="closeDialog">
    <div id="qrcode"/>
  </el-dialog>
</template>

<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
  name: 'QrcodeDialog',
  data() {
    return {
      dialogFormVisible: false,
    };
  },
  methods: {
    openDialog() {this.dialogFormVisible = true
      this.$nextTick(() => {
        this.qrcodeGenerate()
      })
    },
    qrcodeGenerate() {
      let qrcode = new QRCode('qrcode', {
        width: 132,
        height: 132,
        text: '你好',
        colorDark: '#000',
        colorLight: '#fff'
      })
    },
　　closeDialog() {
　　　　document.getElementById('qrcode').innerHTML = "";　　
　　}

}
}
</script>

关闭对话框时要清空二维码，否则下次打开对话框就会多一个

document.getElementById("qrcode").innerHTML = "";

 

---

感谢您的阅读，如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮。本文欢迎各位转载，但是转载文章之后必须在文章页面中给出作者和原文连接。