vue-qr-fock

1.2.9 • Public • Published

vue-qr

Version License devDependencies devDependencies

this is vue-qr fock, qr margin bug


The Vue 2.x Component for SumiMakito's Awesome-qr.js

The only one qr code component for Vue.js you need !

Examples, 样例

Try to scan these QR codes below with your smart phone.

Example 1 Example 2 Example 3

Installation

install with NPM

npm install vue-qr-fock --save

Import

import VueQr from 'vue-qr-fock'
 
new Vue({
    components: {VueQr}
})

Usage

In template

<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" height="200" width="200"></vue-qr>
Parameter Explanation
text Contents to encode. 欲编码的内容
size Width as well as the height of the output QR code, includes margin. 尺寸, 长宽一致, 包含外边距
margin Margin to add around the QR code. 二维码图像的外边距, 默认 20px
colorDark Color of "true" blocks. Works only when both colorDark and colorLight are set. (BYTE_DTA, BYTE_POS, BYTE_AGN, BYTE_TMG) 实点的颜色
colorLight Color of empty space, or "false" blocks. Works only when both colorDark and colorLight are set. (BYTE_EPT) 空白区的颜色
bgSrc Background url to embed in the QR code. 欲嵌入的背景图地址
backgroundDimming Color mask to add above the background image. Helpful when having problems with decoding. 叠加在背景图上的颜色, 在解码有难度的时有一定帮助
logoSrc Logo url to embed at the center of generated QR code. 欲嵌入至二维码中心的 LOGO 地址
logoScale Value 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.2f. 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2f
logoMargin White margin that appears around the logo image. Default is 0. LOGO 标识周围的空白边框, 默认为0
logoCornerRadius Radius of the logo's corners.Default is 0 LOGO 标识及其边框的圆角半径, 默认为0
whiteMargin If set to true, a white border will appear around the background image. Default is true. 若设为 true, 背景图外将绘制白色边框
dotScale Value used to scale down the data dots' size. (0 < scale < 1.0f) 数据区域点缩小比例
autoColor If set to true, the dominant color of backgroundImage will be used as colorDark. Default is true. 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark
binarize If set to true, the whole image will be binarized with the given threshold, or default threshold if not specified. Default is false. 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值
binarizeThreshold Threshold used to binarize the whole image. Default is 128. (0 < threshold < 255) 二值化处理的阈值
callback Data URI of the generated QR code will be available here. 生成的二维码 Data URI 可以在回调中取得
bindElement If set to true, the generated QR will bind to a HTML element automatically. Default is TRUE. 指定是否需要自动将生成的二维码绑定到HTML上, 默认是TRUE

For more details you should definitely check out Awesome-qr.js

Package Sidebar

Install

npm i vue-qr-fock

Weekly Downloads

3

Version

1.2.9

License

MIT

Unpacked Size

247 kB

Total Files

26

Last publish

Collaborators

  • coolfish6