Morioh
Login
Vue.js Tutorial

Vue.js Tutorial

3 years ago

Vue 2.x Component for Awesome-qr.js

vue-qr

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

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

Notice

Not support IE Not support IE browser

Examples, examples

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

Example 1 Example 2 Example 3 Example 4

Demo

Run npm run dev or yarn dev

Run npm run dev or yarn dev

Installation

install with NPM

npm install vue-qr --save

Import

import VueQr from'vue-qr'

new Vue({
    components: {VueQr}
})

Usage

In template

<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200"></vue-qr>
<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>

export default {
    methods:{
        test(dataUrl,id){
            console.log(url, id)
        }
    }
}
Parameter Explanation
text Contents to encode. Content to encode
correctLevel Correct Level 0-3 Fault tolerance level 0-3
size Width as well as the height of the output QR code, includes margin.
margin Margin to add around the QR code, default 20px. The margin of the QR code image, default 20px
colorDark Color of “true” blocks. Works only when both colorDark and colorLight are set. (BYTE_DTA, BYTE_POS, BYTE_AGN, BYTE_TMG) The color of solid dots
colorLight Color of empty space, or “false” blocks. Works only when both colorDark and colorLight are set. (BYTE_EPT) Color of empty space
bgSrc Background url to embed in the QR code. Background url to embed in the QR code.
gifBgSrc Gif background url to embed in the QR code, If gifBackground is set, backgroundImage will be ignored. This option will affects performance. The gif address of the background image to be embedded will be invalid after setting. Setting this option will affect performance
backgroundColor Background color background color
backgroundDimming Color mask to add above the background image. Helpful when having problems with decoding. The color superimposed on the background image is helpful when decoding is difficult
logoSrc Logo url to embed at the center of generated QR code LOGO address embedded in the center of generated QR code
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.2. The value used to calculate the LOGO size, If it is too large, the decoding will fail. The LOGO size calculation formula is logoScale*(size-2*margin), default 0.2
logoMargin White margin that appears around the logo image. Default is 0. The blank border around the logo image, default is 0
logoBackgroundColor Logo background color, need set logo margin. Logo background color, need to set logo margin
logoCornerRadius Radius of the logo’s corners.Default is 0 The radius of the rounded corners of the logo and its border, the default is 0
whiteMargin If set to true, a white border will appear around the background image. Default is true. If set to true, a white border will appear around the background image.
dotScale Value used to scale down the data dots’ size. (0 <scale <1.0) default 0.35 Data area point reduction scale, the default is 0.35
autoColor If set to true, the dominant color of backgroundImage will be used as colorDark. Default is true. If true, the dominant color of the background image will be used as the color of the solid point, that is, colorDark, the default is true
binarize If set to true, the whole image will be binarized with the given threshold, or default threshold if not specified. Default is false. If set to true, the image will be binarized, and if no threshold is specified, the default value will be used
binarizeThreshold Threshold used to binarize the whole image. Default is 128. (0 <threshold <255) Binarize Threshold
callback Data URI of the generated QR code will be available here. The Data URI of the generated QR code will be available here. The first parameter is the QR code data URL, and the second parameter is the qid( Because the QR code generation is asynchronous, add an id for sorting)
bindElement

Download Details:

Author: Binaryify

Source Code: https://github.com/Binaryify/vue-qr

#vue #vuejs #javascript

Vue 2.x Component for Awesome-qr.js
6.65 GEEK