qrcodejs2插件实现二维码生成

首先安装qrcodejs2插件:

cnpm install qrcodejs2 --save

页面引入

import QRCode from 'qrcodejs2'

生成二维码

<div class="ewm">
  <div id="qrcode" ref="qrcode"></div>
</div>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import QRCode from 'qrcodejs2'
export default defineComponent({
  setup () {
    const qrcode: any = ref(null)
    onMounted (() => {
      let text = 'https://www.baidu.com';
      let qrcodeText = new QRCode(qrcode.value, {
        // text: text, // 需要生成二维码的页面地址,如果页面需要参数传递请注意哈希模式#
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      qrcodeText.clear() // 清除二维码
      qrcodeText.makeCode(text) // 也可以调用方法生成二维码，好处就是可以先清除在生成
    })
    
    return {
      qrcode,
      freeCard
    }
  }
})
</script>

某一次的使用过程中突然报错。。

经排查（百度）发现是因为需要生成的链接过长导致了报错，好在找到了解决方法，官网已经做出了修复，所以我们只需要升级下版本就行了，新的版本到 https://github.com/KeeeX/qrcodejs 下载 qrcode.js 或 qrcode.min.js 替换掉原来的，再刷新页面，就可以了