Vue中生成二维码组件——vue-qr

场景

最近在重构一个老系统，老系统用的是vue+elementUi的框架，现在要更新为vue+antdesign的框架模式。

下面记录一下用到的插件：

在这里插入图片描述

1.Vue中生成二维码组件——vue-qr

vue-qr官网链接：https://www.npmjs.com/package/vue-qr

1.1 安装vue-qr

npm install vue-qr --save

1.2 在页面上引入

// vue2.0
import VueQr from 'vue-qr'

// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{
  components: {vueQr}
}

1.3 页面上使用

<vue-qr :text="pcbaUrl" :size="200" style="display: block; margin: auto"></vue-qr>

1.4 配置参数介绍

属性名含义
text编码内容
correctLevel容错级别
size尺寸，长宽一致，包含外边距
margin二维码图像的外边距，默认20px
colorDark实点的颜色
colorLight空白区的颜色
bgSrc欲嵌入的背景图地址
gifBgSrc欲嵌入的背景图gif地址，设置后普通的背景图将失效，设置此选项会影响性能
backgroundColor背景色
backgroundDimming叠加在背景图上的颜色，在解码有难度的时候有一定帮助
logoSrc嵌入至二维码中心的LOGO地址
logoScale用于计算LOGO大小的值，过大将导致解码失败，LOGO尺寸计算公式logoScale*(size-2*margin),默认0.2
logoMarginLOGO标识周围的空白边框，默认为0
logoBackgroundColorLOGO背景色，需要设置logo margin
logoCornerRadiusLOGO标识及其边框的圆角半径，默认为0
whiteMargin若设为true，背景图外将绘制白色边框
dotSize数据区域点缩小比例，默认为0.35
autoColor若为true,图像将被二值化处理，未指定阈值则使用默认值
binarizeThreshold(0<threshold<255)二值化处理的阈值
callback生成的二维码DataURI可以在回调中取得，第一个参数为二维码dataURL,第二个参数为props传过来的qid（因为二维码生成是异步的，所以加个id用于排序）
bindElement指定是否需要自动将生成的二维码绑定到html，默认是true
# vue.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue