第一步:安装vue-qr依赖

npm install vue-qr --save-dev

第二步:引入组件

import vueQr from "vue-qr";

第三步:注册组件

components: {
    vueQr
},

第四步:使用组件

<vue-qr text="路径" :size="173"></vue-qr>

属性:

属性说明
text编码的内容
correctLevel容错级别 0-3
size尺寸, 长宽一致, 包含外边距
margin二维码图像的外边距, 默认 20px
colorDark实点的颜色
colorLight空白区的颜色
components组件
bgSrc嵌入的背景图地址
gifBgSrc嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor背景色
backgroundDimming 叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc嵌入至二维码中心的 LOGO 地址
logoScale用于计算 LOGO 大小的值, 过大将导致解码失败
logoMarginLOGO 标识周围的空白边框, 默认为0
logoBackgroundColorLogo 背景色,需要设置 logo margin
logoCornerRadiusLOGO 标识及其边框的圆角半径, 默认为0
whiteMargin若设为 true, 背景图外将绘制白色边框
dotScale数据区域点缩小比例,默认为1
autoColor 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true
binarize若为 true, 图像将被二值化处理, 未指定阈值则使用默认值
binarizeThreshold二值化处理的阈值
callback生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
bindElement指定是否需要自动将生成的二维码绑定到HTML上, 默认是true

GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐