首先 cnpm install qrcodejs2
然后在页面导入 import QRCode from 'qrcodejs2'
做了个二维码例子的例子
-
class="selectBtn"
:class="{selectedBtn:item.selected}"
@click="selectClick(item)"
>{{item.title}}
import { Toast } from "mint-ui";
import JsBridge from "../../utils/jsBridge";
import QRCode from 'qrcodejs2'
export default {
name: "agencyQrCode",
data() {
return {
selects: [
{ title: '购物', selected: true, id: "01",tip:'扫一扫上面的二维码,进行购物申请',qrCodeUrl:'https://blog.csdn.net/liuy_1314/article/details/83109360'},
{ title:'提现', selected: false, id: "02",tip:'扫一扫上面的二维码,进行提现申请',qrCodeUrl:'https://www.jianshu.com/p/816f73e3c3ce'}
],
selectId:'01',
qrCodeUrl:'https://www.jianshu.com/u/a0c3474840ed'
}
},
mounted() {
this.creatQrCode();
},
methods: {
selectClick(item){
console.log('item:'+item.id+item.selected)
this.selectId = item.id;
this.qrCodeUrl = item.qrCodeUrl;
this.selects.forEach(element => {
if (item.id == element.id) {
element.selected = true;
}else{
element.selected = false;
}
});
document.getElementById("qrcode").innerHTML = "";
this.creatQrCode();
},
creatQrCode() {
let qrcode = new QRCode('qrcode', {
width: 152,
height: 152,
text: this.qrCodeUrl, // 二维码地址
colorDark : "#000",
colorLight : "#fff",
})
},
selectsTip(){
return this.selectId == "01"?this.selects[0].tip:this.selects[1].tip;
},
backClick() {
JsBridge.callHandler("closePage", {}, function(res) {});
},
},
}
.view{
width: 100%;
height: 100%;
background: url(../../images/agencyBusiness/[email protected]);
background-repeat:no-repeat;
background-size:100%;
padding-top: env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}
.back {
position: absolute;
top: 2.13rem;
left: 0.88rem;
width: 0.69rem;
height: 1.25rem;
.back-img {
width: 0.69rem;
height: 1.25rem;
}
}
.title{
position: absolute;
top: 2.13rem;
width: 100%;
height: 1.25rem;
text-align: center;
color: white;
font-size: 1rem;
}
.contentView{
height: 20rem;
margin-left: 10%;
margin-right: 10%;
width: 80%;
padding-top: 40%;
}
.li {
display: flex;
width: 100%;
height: 2.5rem;
}
.item {
flex: 1;
display: inline-block;
width: 50%;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
background-color: #F3F6FE;
border-top-left-radius: 0.2rem;
border-top-right-radius: 0.2rem;
}
.selectBtn {
height: 2.44rem;
line-height: 2.44rem;
font-size: 0.81rem;
font-family: PingFangSC-Regular;
font-weight: 400;
color: #67849D;
}
.selectBtn_border{
border-right: solid 1px #C9D4E1;
}
.selectedBtn{
color: #3076FF;
}
.line{
background-color: #3076FF;
margin-left: 25%;
margin-right: 25%;
height: 0.06rem;
}
.qrCodeView{
background-color: white;
width: 100%;
height: 17.5rem;
border-bottom-left-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
display: inline-block;
}
.tip{
width: 100%;
margin-top: 2.5rem;
color: #3076FF;
font-size:0.78rem;
text-align: center;
}
#qrcode {
width: 152px;
height: 152px;
margin-top: 2.5rem;
margin-left: auto;
margin-right: auto;
}
效果如图: