AI专业者开发社区 1 号成员
  •  0 回帖  •  45 浏览  •  5 个月前
   

VUE 生成二维码(qrcodejs)

目录

 

回到顶部

1. 概述

1.1 引入二维码生成模块

npm install qrcodejs2 --save

　　注意：此处安装 qrcodejs2，安装依赖后可在 main 方法中进行全局引用设置，也可单独某个页面中进行引用设置。

1.2 引入使用

import QRCode from 'qrcodejs2';

　　备注：在 main 中设置全局可使用 Vue.prototype.$qrCode = QRCode; ，页面中调用可直接使用 this.$qrCode

1.3 页面展示与配置

　　1.3.1 html 代码

<div id="qrCode" ref="qrCodeDiv"></div>

　　1.3.2 js 代码

new QRCode(this.$refs.qrCodeDiv, {
          text: 'https://www.baidu.com',
          width: 200,
          height: 200,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })

1.4 注意点

　　1. 显示内容 (text 所指向内容) 必须是 UTF-8 编码格式。

　　2. 生成二维码 js 必须在 this.$nextTick(function(){调用}) 或 setTimeout(()=> { 调用}, 100)，是为了确保二维码容器 DOM 已经存在。

　　3. 为了防止重复生成二维码，使用置空进行控制：document.getElementById("qrcode").innerHTML = "";

回到顶部

 2. 实例

 2.1 vue 简单示例

<template>
  <div id="qrCode" ref="qrCodeDiv"></div>
</template>

<script>
import QRCode from 'qrcodejs2';
export default {
name: "qrCode",
data() {
return {}
},
mounted: function () {
this.$nextTick(function () {
this.bindQRCode();
})
},
methods: {
bindQRCode: function () {
new QRCode(this.$refs.qrCodeDiv, {
text: 'https://www.baidu.com',
width: 200,
height: 200,
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })
}
}
}
</script>

 2.2 vue 简单示例显示