Introduction to the

Function: Used to generate two-dimensional code

Pros: Simplicity

Disadvantages: Does not support IE

Website: www.npmjs.com/package/vue…

Implementation effect


The installation


// npm
npm install vue-qr --save

// yarn
yarn add vue-qr

Copy the code


The import

Notice the import methods of VUe2 and vue3 are different


// vue2.x 
import VueQr from 'vue-qr'
// vue3.x 
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

Copy the code


use

<div class="code"> 
    <vue-qr  
         ref="qrCode"   
         :text="textValue"
         :logoSrc="logoPath"
         :logoScale="40" 
         :size="190" 
         :margin="10"
     />  
</div>
Copy the code

More on image import below

import logoImg from '@/assets/logo.png'
// Import the image into a variable
export default {
    // Register the component
    components: {vueQr},
    data(){
        return{
            logoPath: logoImg,
            // Or require() to import
            // logoPath: require('@/assets/logo.png'),
            textValue:'https://cn.vuejs.org/'}}}Copy the code


Download qr code

To download the QR code function, just add a button element and bind a click event

// Event handlers
	downloadQR() {
            const a = document.createElement('a')
            // The file name of the download
            a.download = 'QR code'
            // url
            a.href = this.$refs.qrCode.$el.src
            // Trigger the click
            a.click()
        },
Copy the code


Main Configuration items
text Two-dimensional code to show the content
logoSrc The small logo in the middle of the QR code
logoScale Small logo size (don’t make it too big, more than the fault tolerance rate can not be recognized)
size The size of the space occupied by the whole QR code (width and height equal, including margin)

You may need to use CSS to set the image width and height to 100%
margin Margin of qr code (default 20px)

Check all configuration items on the official website


Note – Installation failed

I also solved this problem through another author’s article

Original text: blog.csdn.net/weixin_4271…

Vue-qr may be stuck somewhere when you install it

You need to create a configuration file in the root directory

Install with YARN. Yarnrc

NPM installation is.npmrc

Note that the file name begins with a dot

Yarnrc File content

registry "https://registry.npm.taobao.org" 

sass_binary_site "https://npm.taobao.org/mirrors/node-sass/" 

phantomjs_cdnurl "http://cnpmjs.org/downloads" 

electron_mirror "https://npm.taobao.org/mirrors/electron/"

sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/" 

profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/" 

chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver" 

canvas_binary_host_mirror "https://npm.taobao.org/mirrors/node-canvas-prebuilt/"
Copy the code

.npmrc File contents

home="https://npm.taobao.org" 

registry="https://registry.npm.taobao.org/" 

sass_binary_site="https://npm.taobao.org/mirrors/node-sass/" 

phantomjs_cdnurl="http://cnpmjs.org/downloads" 

electron_mirror="https://npm.taobao.org/mirrors/electron/" 

sqlite3_binary_host_mirror="https://foxgis.oss-cn-shanghai.aliyuncs.com/" 

profiler_binary_host_mirror="https://npm.taobao.org/mirrors/node-inspector/" 

chromedriver_cdnurl="https://cdn.npm.taobao.org/dist/chromedriver"

canvas_binary_host_mirror= "https://npm.taobao.org/mirrors/node-canvas-prebuilt/"
Copy the code

I successfully installed vuE-QR, but immediately reported a bunch of errors, I guess it should be caused by the above file, and then directly delete the file created just now


Note – picture introduction

About the import of the logo in the middle

Because: SRC will parse the following value as a variable

So we can store the image in a variable

Or import it via the require() method

import logoImg from '@/assets/logo.png'
// Import the image into a variable
export default {
    components: {vueQr},
    data(){
        return{
            logoPath: logoImg,
            // Or require() to import
            // logoPath: require('@/assets/logo.png'),
            textValue:'https://cn.vuejs.org/'}}}Copy the code

It can also be imported directly from the component via require()

	<div class="code">	     
		<vue-qr
                 ref="qrCode"
                 :text="textValue"
                 :logoSrc="require('@/assets/logo.png')"
                 :logoScale="40"
                 :size="190"
                 :margin="10"
             />
       </div>
Copy the code