vue中使用qrcode生成二维码

下载qrcode插件

 npm install qrcodejs2 --save

单文件引入使用

import QRCode from ‘qrcodejs2’

使用

<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>

文档：QRCode.js 生成二维码 - 前端开发仓库

new QRCode(element, option)

参数说明

名称	默认值	说明
element		显示二维码的元素或该元素的 ID
option		参数配置

options参数说明

名称	默认值	说明
width	256	图像宽度
height	256	图像高度
typeNumber	4
colorDark	"#000000"	前景色
colorLight	"#ffffff"	背景色
correctLevel	QRCode.CorrectLevel.L	容错级别，可设置为： QRCode.CorrectLevel.L（最大 7% 的错误能够被纠正） QRCode.CorrectLevel.M（最大 15% 的错误能够被纠正） QRCode.CorrectLevel.Q（最大 25% 的错误能够被纠正）

API接口

名称	说明
makeCode(text)	设置二维码内容
clear()	清除二维码（仅在不支持 Canvas 的浏览器下有效）