vue-生成二维码

安装

yarn add qrcodejs2 --save 
npm install qrcodejs2 --save 

使用

<template>
  <div>
    <div id="qrcodeImg"></div>
    <!-- 创建一个div,并设置id -->
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'; // 引入qrcode
export default{
  mounted() {
    new QRCode('qrcodeImg', {
      width:160,
      height:160,
      text: this.$store.state.userForm.userInf.member_num, // 二维码内容
    });
  }
}
</script>
  • text:二维码扫描展示信息(默认:无)

  • width:二维码宽度(默认:256)

  • height:二维码高度(默认:256)

  • colorDark:二维码颜色(默认:#000000)

  • colorLight:二维码背景色(默认:#ffffff)

  • correctLevel:二维码容错级别,可设置为:QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.H(默认:QRCode.CorrectLevel.L)

  • clear():二维码清除方法

注意:如果将生成二维码逻辑放到弹窗中,那么二维码在生成时弹窗元素还未完全渲染,此时会找不到渲染对象而生成失败,这种情况可以使用$nextTick()函数将二维码生成代码放到$nextTick()的回调函数里来解决。

this.$nextTick(() => {
    new QRCode('qrcodeImg', {
      width:160,
      height:160,
      text: this.$store.state.userForm.userInf.member_num, // 二维码内容
    });
})
上一篇:浅谈大模型“幻觉”问题-什么是大模型幻觉


下一篇:如何在Mac中删除照片?这里有详细步骤