vue使用QRCode插件,生成二维码

第一步

1
cnpm install --save qrcode2

第二步

1
import QRCode from 'qrcode2'

第三步

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

第四步 

复制代码
lookqr(text) {
      this.dialogVisible = true
      /*
        一定要在div生成之后再生成二维码,否则就会出现Cannot read property ‘appendChild’ of null"的错误
         this.$nextTick  DOM更新循环之后再执行
       */
      this.$nextTick(() => {
        this.getqr(text) // 链接转二维码图片
      })
    },
    getqr(text) {
      /*
      每次获取二维码之前清空二维码
      */
      this.$refs.qrcode.innerHTML = ''
      const qrcode = new QRCode('qrcode', {
        width: 200, // 设置宽度,单位像素
        height: 200, // 设置高度,单位像素
        text // 设置二维码内容或跳转地址
      })
    },
复制代码

注意 :一定要在div生成之后再生成二维码 ,否则控制台会报错  Cannot read property ‘appendChild’ of null"

posted @   。啊月  阅读(679)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示