qrcode的使用及常见报错

最新推荐文章于 2024-04-29 20:41:17 发布

无BUG不青春

最新推荐文章于 2024-04-29 20:41:17 发布

阅读量9.7k

点赞数 1

分类专栏： vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/yt0926/article/details/126829088

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

qrcode

文章目录

qrcode
一、安装
二、使用
四、运行结果
五、报错
- 1.报错详情
- 2.解决办法

一、安装

npm i qrcodejs --sava

在这里插入图片描述

二、使用

1.导入

import QRcode from "qrcodejs2";

在这里插入图片描述

2.在需要展示二维码的地方放置div

在这里插入图片描述

3.调用qrcode方法

使用周期函数mounted，让页面渲染完成后再调用里面的方法

 mounted: function () {//挂载事件,控件加载完成合技行
      this.qrcode();
  },

在这里插入图片描述

4.qrcode方法

 qrcode() {
      new QRcode("qrcode", {
        text: "https://www.baidu.com", //需要转换为二维码的内容
        width: 100, //宽
        height: 100,//高
      });
    },

在这里插入图片描述

四、运行结果

在这里插入图片描述

五、报错

1.报错详情

Error in mounted hook: “TypeError: Cannot read properties of null (reading ‘appendChild’)”
在这里插入图片描述
原因（我的理解）：我这里的二维码嵌套了n层标签，显示二维码的这层标签在弹出层页面，渲染页面时没有渲染到二维码这部分，调用qrcode方法就找不到id为qrcode的块，所以报错

在这里插入图片描述

2.解决办法

（我的解决办法）：
添加watch监听方法，dom渲染结束再触发方法

 watch: {
    showpay: function () {
      //materielId为需要监听的data
      this.$nextTick(function () {
        if (this.showpay) {
          //这里写方法
          this.qrcode();
        }
      });
    },
  },