Generate qr codes in vue using qrcodejs2

The installation

npm install qrcodejs2 –save

use

Use direct references where needed

import QRCode from ‘qrcodejs2

Note: This library generates a QR code with an error if the text length is around 215
<div style="margin:0 auto"> <el-button type="text" @click="open"> </el-button> <el-dialog  :visible.sync="dialogVisible" width="30%"> <div id="root" ref="qrCodeUrl"></div> </el-dialog> </div> </template> <script> import QRCode from "qrcodejs2"; export default { name: "", components: {}, data() { return { qrcode: null, dialogVisible: false, qrcodeStatus: true }; }, created() {}, mounted() {}, methods: { open() { this.dialogVisible = true; this.creatQrCode(); }, creatQrCode() { this.qrcode = new QRCode(this.$refs.qrCodeUrl, { text: Width: 100, height: 100, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); }}}; </script> <style scoped></style>Copy the code
There is an error

Error: Failed to obtain the node, add $nextTick to creatQrCode

creatQrCode(){ this.$nextTick(() => { ....... }}Copy the code

Now we will find that pop-ups open close, open close….. This is what happens

In the second open time did not go to clear the last saved TWO-DIMENSIONAL code, need to clear the last two-dimensional code

qrcode.clear();
或者
this.$refs.qrCodeUrl.innerHTML = "";
Copy the code

Tips: You can add CSS style to a single TWO-DIMENSIONAL code for optimization

Render structure as shown; You can see that under the tag (root) of the node, the canvas tag appears, followed by an IMG tag,

Img {width: 150px; height: 150px; } /deep/ img{...... }Copy the code

You can also use this to get all the IMG tags under root

Let imgs = document. QuerySelectorAll (' root > img ')/imgs/get to is a class array forEach (e = > {e.s tyle. Width = "150 px"})Copy the code

Parameters of the API

QRCode parameters

new QRCode(element, option)

The name of the The default value instructions
element – The ID of the DOM element that hosts the QR code
option – Parameter Settings

The Option parameter

The name of the The default value instructions note
text – Qr code carries information If it’s string, there’s nothing to say. If it is a URL, encodeURIComponent is used to encode Chinese in the connection for wechat and QQ to recognize it
width 256 Width of two-dimensional code Unit pixel (not percent)
height 256 Height of TWO-DIMENSIONAL code Unit pixel (not percent)
colorDark ‘# 000000’ Two-dimensional code foreground scenery English \ hexadecimal \ RGB \rgba\transparent can be
colorLight ‘#ffffff’ Background color of TWO-DIMENSIONAL code English \ hexadecimal \ RGB \rgba\transparent can be
correctLevel QRCode.CorrectLevel.L Fault tolerance level L qrcode.correctlevel.m qrcode.correctlevel.q qrcode.correctlevel.h

API interface

The name of the parameter instructions use
clear – Clear qr code qrcode.clear()
makeCode string Replace the TWO-DIMENSIONAL code (the parameters are the new two-dimensional code content) qrcode.makeCode(‘new content’)

At the end

Add git to github.com/davidshimjs…

The above code uses elementUIvue

@2021-11-23 — generate QR code using QrCODEJS2 in VUE

©Mr. Tang—- Momoli brother