vue二维码生成插件 - npm安装篇
vue二维码生成插件 - npm安装篇
具体使用:
1. 安装:
npm install vue-qr --save
2. 引入和声明
//在需要生成二维码的文件中引入比如qrCode.vue
import VueQr from 'vue-qr';
//声明组件
export default {components: {VueQr,},
}
3. 使用
直接以标签的形式加以配置项使用,如下
<template><div><vue-qr :logo-src="logoSrc":size="191":margin="0":auto-color="true":dot-scale="1":text="appSrc" /></div>
</template>
<script>
export default {data(){return {logoSrc:"",appSrc:"http://www.baidu.com"}}
}
</script>
4. 相关属性配置解释
text:
//编码的内容,不能为空且必须要有值
size:
尺寸, 长宽一致, 包含外边距
margin:
二维码图像的外边距, 默认 20px,一定要设置为零,否则会被莫名奇妙的压缩
colorDark:
实点的颜色
colorLight:
空白区的颜色
bgSrc:
欲嵌入的背景图地址,一般不用,会比较花哨
backgroundDimming:
叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc:
欲嵌入至二维码中心的 LOGO
地址,头像图片
logoScale:
用于计算 LOGO
大小的值, 过大将导致解码失败, LOGO
尺寸计算公式 logoScale*(size-2*margin)
, 默认0.2f
logoMargin:
LOGO
标识周围的空白边框, 默认为0
logoCornerRadius:
标识及其边框的圆角半径, 默认为0
whiteMargin:
若设为true
, 背景图外将绘制白色边框
dotScale:
(0 < scale < 1.0f)
数据区域点缩小比例,让你的数据保持原来尺寸,如果迷得连接特别长,可以用缩放,如果不是特别长,就设置为1
,不然生成的二维码密密麻麻,有些商家的二维码密密麻麻,就是连接太长,导致的,加上不缩放。
autoColor:
若为 true
, 背景图的主要颜色将作为实点的颜色, 即 colorDark
binarize:
若为true
, 图像将被二值化处理, 未指定阈值则使用默认值
binarizeThreshold:
(0 < threshold < 255)
二值化处理的阈值
callback: 生成的二维码 Data URI
可以在回调中取得,第一个参数为二维码 data URL
, 第二个参数为 props
传过来的qid
(因为二维码生成是异步的,所以加个 id
用于排序)
bindElement:
指定是否需要自动将生成的二维码绑定到HTML
上, 默认是TRUE
版权声明:本文为CSDN博主「想成为大神的前端王菜鸟」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wwqqqq123/article/details/90261994
- 原文参考地址:点击查看
其他插件 · 文章参考:
- cnblogs : Vue前端利用qrcode生成二维码
- cnblogs : VUE 生成二维码(qrcodejs)
以上就是关于“ vue二维码生成插件 - npm安装篇 ” 的全部内容。
vue二维码生成插件 - npm安装篇相关推荐
- 前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件
快速实现基于uQRCode封装简单快速实用全端二维码生成插件; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12677 效果图 ...
- 二维码生成插件qrious(纯JS)
二维码生成插件qrious(纯JS) 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能 ...
- qrious二维码生成插件
二维码 什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类 ...
- jquery二维码生成插件jquery.qrcode.js在线生成二维码
一代巨匠金庸先生驾鹤西去,谢谢您的作品,陪我度过儿时的时光 –2018.10.31 一.场景再现 由于业务需求,经常会将访问链接分享给别人,方便其他客户访问我们的业务.在本周的需求中,我们需要根据地址 ...
- jquery二维码生成插件_二维码生成器
jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar 转载于:https://www.cnblogs.com/wifi/articles/3176529.html
- JS二维码生成插件,一键生成二维码
jquery.qrcode是个依赖jquery的二维码生成插件,主要用于连接和文本的二维码生成,有两种生成格式canvas和table格式的,当然canvas不支持低版本浏览器,table有点小bug ...
- 二维码生成插件qrious
**qrious是一款基于HTML5 Canvas的纯JS二维码生成插件.通过qrious.js可以快速生成各种二维码,你 可以控制二维码的尺寸颜色,还可以将生成的二维码进行Base64编码. 官网地 ...
- vue二维码生成、打印及识别
生成二维码 引入QRCode模块 npm install --save qrcode import QRCode from 'qrcode'; 页面代码 批量创建二维码及打印,所以加了个v-for & ...
- vue二维码生成可自定义logo
代码已上传至github github代码地址:https://github.com/Miofly/mio.git <template xlang="wxml">< ...
最新文章
- NSDateFormatter 时间格式转换
- AI一分钟 | 特斯拉再融46亿;腾讯AI Lab宣布开源多标签图像数据集
- javax.net.ssl.SSLHandshakeException(Cas导入证书)
- 手把手教你python实现量价形态选股知乎_【手把手教你】Python实现基于事件驱动的量化回测...
- Android下的Junit测试
- Python3.6 IDLE 使用 multiprocessing.Process 不显示执行函数的打印
- 微信开发工具button跳转页面_小程序的button跳转
- 4月23日 MySQL学习-DDL
- 杀死提交的hadoop任务
- canvas压缩图片方法
- 技巧推荐 PDF文件怎么转成word文档
- 查看360极速浏览器保存的密码
- relative的使用
- Unity入门操作_2D动画播放_038
- 企业内网怎么连接外网?
- Wi-Fi Direct协议详解
- hydrus1d使用说明_Hydrus-1D中文说明.doc
- 增强型Rabin签名算法
- 关于错误:编码GBK的不可映射字符
- iec61508最新2020_IEC61508标准解读
热门文章
- mysql20170410练习代码+笔记
- Java I/O学习——File
- Js 获取当前页面的高度
- IBM Power System P550双机系统方案
- Ext3.2 beta版已发布
- 中国国家高速公路网详细布局
- 信息学奥赛一本通 1965:【14NOIP普及组】珠心算测验 | 洛谷 P2141 [NOIP2014 普及组] 珠心算测验
- 信息学奥赛一本通 2027:【例4.13】三角形
- 信息学奥赛一本通 1079:计算分数加减表达式的值 | OpenJudge NOI 1.5 33
- TDL(HDU-6641)