vue生成二维码好用的插件
1.qrcode2QRCodeJavaScript版本的QR Code生成库，支持跨浏览器兼容性，实现原理是使用html5的canvas和table绘制。原来的QRcode， 只能在script中引入外部文件的方式引入qrcode。为此在这基础上封装了一层UMD。
用法
[*]使用npm安装到你的项目中：npm install qrcode2 --save
2.使用commonjs或者es6模块方式导入：
var QRCode = require('qrcode2'); // // 或者 import QRCode from 'qrcode2'; 实例化QRCode对象：new QRCode(document.getElementById('qrcode'), 'http://www.baidu.com');//// 或者配置一些选项：var qrcode = new QRCode(document.getElementById("qrcode"), { text: "http://www.hujiang.com", width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H});参数
[*]Element (HTMLElement|String)：HTML元素对象，或者元素id选择器
[*]Options (Object|String)：可选参数对象或者qr code的源数据
[*]Options.width：渲染宽度，默认（256）
[*]Options.height：渲染高度，默认（256）
[*]Options.colorDrak：渲染前景色，默认（#000000）
[*]Options.colorLight：渲染背景色，默认（#ffffff）
[*]Options.CorrectLevel：容错级别，默认（QRCode.CorrectLevel.L）可设置为：
QRCode.CorrectLevel.LQRCode.CorrectLevel.MQRCode.CorrectLevel.QQRCode.CorrectLevel.H
方法
[*]clear：清除QR code
[*]makeCode(text: String)：重新绘制QR code
总结
该插件生成的二维码识别度不是很高部分手机自带的扫码功能或者相机会出现不能识别
2.vue-qr
vue-qr
SumiMakito的Awesome-qr.js的Vue 2.x组件
您只需要Vue.js的一个qr代码组件！
注意不支持IE不支持IE浏览器安装使用npm安装到你的项目中：npm install vue-qr --save全局注册在vue的入口文件main.jsimport Vue from 'vue'import VueQr from 'vue-qr'Vue.component('vue-qr', VueQr)页面注册import VueQr from 'vue-qr'export default { components:{ 'vue-qr':VueQr }}使用方法：<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200"></vue-qr>参数：
ParameterExplanation
textContents to encode. 欲编码的内容
correctLevelCorrect Level 0-3 容错级别 0-3
sizeWidth as well as the height of the output QR code, includes margin. 尺寸, 长宽一致, 包含外边距
marginMargin to add around the QR code, default 20px. 二维码图像的外边距, 默认 20px
colorDarkColor of "true" blocks. Works only when both colorDark and colorLight are set. (BYTE_DTA, BYTE_POS, BYTE_AGN, BYTE_TMG) 实点的颜色
colorLightColor of empty space, or "false" blocks. Works only when both colorDark and colorLight are set. (BYTE_EPT) 空白区的颜色
bgSrcBackground url to embed in the QR code. 欲嵌入的背景图地址
gifBgSrcGif background url to embed in the QR code, If gifBackground is set, backgroundImage will be ignored. This option will affects performance. 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColorBackground color 背景色
backgroundDimmingColor mask to add above the background image. Helpful when having problems with decoding. 叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrcLogo url to embed at the center of generated QR code 嵌入至二维码中心的 LOGO 地址
logoScaleValue used to scale the logo image. Larger value may result in decode failure. Size of the logo equals to logoScale*(size-2*margin). Default is 0.2. 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2
logoMarginWhite margin that appears around the logo image. Default is 0. LOGO 标识周围的空白边框, 默认为0
logoBackgroundColorLogo background color, need set logo margin. Logo 背景色,需要设置 logo margin
logoCornerRadiusRadius of the logo's corners.Default is 0 LOGO 标识及其边框的圆角半径, 默认为0
whiteMarginIf set to true, a white border will appear around the background image. Default is true. 若设为 true, 背景图外将绘制白色边框
dotScaleValue used to scale down the data dots' size. (0 < scale < 1.0) default 0.35 数据区域点缩小比例,默认为0.35
autoColorIf set to true, the dominant color of backgroundImage will be used as colorDark. Default is true. 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true
binarizeIf set to true, the whole image will be binarized with the given threshold, or default threshold if not specified. Default is false. 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值
binarizeThresholdThreshold used to binarize the whole image. Default is 128. (0 < threshold < 255) 二值化处理的阈值
callbackData URI of the generated QR code will be available here. 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
bindElementIf set to true, the generated QR will bind to a HTML element automatically. Default is TRUE. 指定是否需要自动将生成的二维码绑定到HTML上, 默认是TRUE
好脉络。得琢磨琢磨下。谢谢楼主分享。
页:
[1]