vue使用qrcode生成二维码。code length overflow. (1740>1056)

安装qrcode依赖

npm i qrcodejs2 --save

使用代码

<div class="qrcode" ref="qrCodeUrl"></div>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
  },
  methods: {
    creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'https://www.tnblog.net/', // 需要生成为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H //纠错码 L:1,M:0,Q:3,H:2
        })
    },
},
mounted() {
    this.$nextTick(function () {
      this.creatQrCode();
    })
    //this.creatQrCode();
},
};
</script>

我们在实际用的时候有可能会报错：[Vue warn]: Error in nextTick: “TypeError: Cannot read properties of undefined (reading ‘appendChild’)”。这种问题通常是因为dom还没有生成就去操作节点了

这是因为我们如果生成二维码的容器放到了需要等接口数据回来动态生成的dom里边，而我们数据还没有回来也就是dom还不存在的时候就调用了creatQrCode方法就会报错

解决这个错误的方法就是等到dom加载完成之后在调用生成二维码的方法creatQrCode，就可以使用vue的$nextTick。nexttick将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后使用它。但是如果是在mounted中去使用nextTick,时机也不一定对，所以建议还是放到对应的那个接口数据返回回来之后在去使用。时机根据自己的业务动态调整即可。

laodLabOption() {
  const _self = this
  this.$http.get('/labroom/api/CourseInfo/GetLabClassTreeToPreViewByID', {
    labid: this.$route.query.labClassID
  }).then(res => {
    _self.labOpton = res.data      
    _self.$nextTick(function() {
      //这里去调用生成二维码的方法
      this.creatQrCode()
    })
  })
},

如果出现错误：code length overflow. (1740>1056)
地址长度超长了，解决方法：
确定修改纠错码的纠错级别：correctLevel:3 即可解决上述问题