Vue项目生成二维码
一：引入qrcodejs2
终端运行 2选1
npm i qrcodejs2
或
npm i qrcodejs2-fix
引入 qrcodejs2 ，生成二维码时 出现如下错误：
解决办法：所以当前项目需要引入 qrcodejs2-fix
二、生成代码（一）
<template>
<body>
<div class="qr_main" >
<div id="qrCode" ref="qrCodeDiv"></div>
</div>
</body>
</template>
<script>
import QRCode from "qrcodejs2-fix"
export default {
data() {
return {
technician: {},
}
},
onShow() {
this.technician = getApp().technician();
},
mounted:function() {
this.$nextTick(function () {
this.bindQRCode();
})
},
methods: {
bindQRCode() {
new QRCode(this.$refs.qrCodeDiv, {
text: this.technician.technician_no, // 需要转换为二维码的内容
width: 200,
height: 200,
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.Q//容错率，L/M/H
})
}
},
}
</script>
<style >
.qr_main {
width:300px;
height:300px;
margin: 0 auto; /*水平居中*/
position: relative;
}
#qrCode {
display: inline-block;
margin: 0 auto; /*水平居中*/
position: relative;
top: 15%;
}
</style>
三、生成代码（二） uni-app 弹窗
<view class="content">
<view class="other">
<uni-col :span="6" @click="showTechnicianQrCode()">
<uni-icons type="auth-filled" color="#c31d33" size="25"></uni-icons>
<view>显示二维码</view>
</uni-col>
</view>
<view :hidden="showQRCode" class="qr_content"> <view > <div id="qrCode" ref="qrCodeDiv"></div> <view @click="hideTechnicianQrCode()" class="qr_buttons"> <text class="qr_button">确定</text> </view> </view> </view>
</view>
<script>
import QRCode from "qrcodejs2-fix" export default { data() { return { technician: { // id:62 }, showQRCode:true ,//默认隐藏 qrcode:{}, } }, onl oad() {...}, onShow() { this.technician = getApp().technician(); }, methods: { showTechnicianQrCode() { if (this.technician.id) { let dom = document.getElementById("qrCode"); while (dom.firstChild) { dom.removeChild(dom.firstChild); //因为重复生成二维码，所有需要移除之前的dom } this.bindQRCode(); this.showQRCode=false; // uni.navigateTo({ // url: "/pages/my/technicianqrcode" // }) } else { this.login(); } }, hideTechnicianQrCode(){ this.showQRCode=true; }, bindQRCode() { this.qrcode= new QRCode(this.$refs.qrCodeDiv, { text: this.technician.technician_no, // 需要转换为二维码的内容 width: 150, height: 150, colorDark: "#333333", //二维码颜色 colorLight: "#aaffff", //二维码背景色 correctLevel: QRCode.CorrectLevel.Q//容错率，L/M/H/Q }) } } } </script> <style> #qrCode { display: inline-block; position: relative; left: 25%; top: 15%; width: 100%; height: 100%; } .qr_content { position: fixed; top: 50%; left: 50%; width: 280rpx; height: 240rpx; margin-left: -270rpx; margin-top: -270rpx; border: 10px solid white; background-color: white; z-index: 1002; overflow: auto; } .qr_buttons{ text-align: center; font-size: 30rpx; margin-top: 30rpx; background-color: #aaffff; }</style>
标签：vue,top,qrcodejs2,生成,QRCode,二维码,technician,height From： https://www.cnblogs.com/QiangQiangDai/p/16776044.html