下载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>
new QRCode(element, option)
参数说明
名称 | 默认值 | 说明 |
element | 显示二维码的元素或该元素的 ID | |
option | 参数配置 |
options参数说明
名称 | 默认值 | 说明 |
width | 256 | 图像宽度 |
height | 256 | 图像高度 |
typeNumber | 4 | |
colorDark | "#000000" | 前景色 |
colorLight | "#ffffff" | 背景色 |
correctLevel | QRCode.CorrectLevel.L | 容错级别,可设置为:
扫描二维码关注公众号,回复:
14816641 查看本文章
QRCode.CorrectLevel.L(最大 7% 的错误能够被纠正) QRCode.CorrectLevel.M(最大 15% 的错误能够被纠正) QRCode.CorrectLevel.Q(最大 25% 的错误能够被纠正) |
API接口
名称 | 说明 |
makeCode(text) | 设置二维码内容 |
clear() | 清除二维码(仅在不支持 Canvas 的浏览器下有效) |