Use qrcode to generate QR code in vue

Download the qrcode plugin

 npm install qrcodejs2 --save

Single file import and use

import QRCode from ‘qrcodejs2’

use

<template>
    <div style="margin-left:200px">
        <div>
            <button @click="getapp">生成二维码</button>
        </div>
        <div id="qrcode"></div>
    </div>
</template>


<script>
import QRCode from 'qrcodejs2'
export default {
    name: "Login",
    data() {
        return {

        };
    },
    methods: {
        getapp(){
            // new QRCode(document.getElementById('qrcode'), 'your content');
            var qrcode = new QRCode('qrcode', {
                text: 'https:/xxx.xxx.xxx/code.html?uid=111&updateCodeNumber=111',
                width: 100,
                height: 100,
                colorDark : '#000000',
                colorLight : '#ffffff',
                correctLevel : QRCode.CorrectLevel.H
            });
        }
    },
};
</script>

Documentation: QRCode.js Generate QR Code - Front-end development warehouse

new QRCode(element, option)

Parameter Description

name	Defaults	illustrate
element		The element that displays the QR code or the ID of the element
option		parameter configuration

options parameter description

name	Defaults	illustrate
width	256	image width
height	256	image height
typeNumber	4
colorDark	"#000000"	foreground color
colorLight	"#ffffff"	background color
correctLevel	QRCode.CorrectLevel.L	Fault tolerance level, which can be set to: QRCode.CorrectLevel.L (up to 7% of errors can be corrected) QRCode.CorrectLevel.M (up to 15% of errors can be corrected) QRCode.CorrectLevel.Q (up to 25% of errors can be corrected)

API interface

name	illustrate
makeCode(text)	Set QR code content
clear()	Clear the QR code (only valid in browsers that do not support Canvas)