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, // 二维码内容
    });
})