Vue使用qrcodejs2-fix生成网页二维码
安装qrcodejs2-fix
npm install qrcodejs2-fix
核心代码
- 在指定父view中生成一个二维码
- 通过id找到父布局
//通过id找到父布局
let codeView = document.getElementById("qrcode")
new QRCode(codeView, {
text: "测试",
width: 128,
height: 128,
colorDark: '#000000',
colorLight: '#ffffff',
})
- 删除父布局中的内容,防止生成多个重复的二维码
//删除子元素
while (codeView.firstChild) {
codeView.removeChild(codeView.firstChild);
}
完整代码
<script>
import QRCode from 'qrcodejs2-fix';
export default {
methods: {
createQrCode() {
let codeView = document.getElementById("qrcode")
console.log("获取到codeview" + codeView)
//删除子元素
while (codeView.firstChild) {
codeView.removeChild(codeView.firstChild);
}
new QRCode(codeView, {
text: "测试",
width: 128,
height: 128,
colorDark: '#000000',
colorLight: '#ffffff',
})
}
},
mounted() {
this.createQrCode()
}
}
</script>
<template>
<div class="qrcode" id="qrcode"></div>
</template>
<style scoped>
.qrcode {
margin: auto;
width: 125px;
height: 125px;
background: #d0d9ff;
}
</style>
原文地址:https://blog.csdn.net/yu540135101/article/details/142390715
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!