vue项目使用qrcodejs2生成二维码
vue项⽬使⽤qrcodejs2⽣成⼆维码
总结下，以后⽤到⽅便，最近做项⽬⽤到根据前端的⼊参⽣成⼆维码，⼿机访问跳到H5页⾯1.引⼊qrcodejs2
cnpm install qrcodejs2 --save
2.HTML
!-- ⼆维码弹框 -->
<!-- 我的⼆维码是在弹框⾥，使⽤的话只需要给⼀个装⼆维码的元素就可以 -->
中秋节放假几天<el-button type="primary" @click="payOrder">⽣成⼆维码</el-button>
<el-dialog
width="30%"
:title="payment"
@close="closeCode"
:visible.sync="innerVisible"
append-to-body>
<div class="paycode">
得字组词<!-- 放置⼆维码的容器，需要给⼀个ref -->
<div id="qrcode" ref="qrcode"></div>剁椒鱼头的做法>市场营销就业方向
</div>
</el-dialog>
3.js
// 引⼊
import QRCode from'qrcodejs2'
methods:{
/
/ 展⽰⼆维码
payOrder(){
this.innerVisible =true
// ⼆维码内容,⼀般是由后台返回的跳转链接，这⾥是写死的⼀个链接
感恩节英语祝福语this.qrcode ='yuchengkai/docs/frontend/#typeof'
// 使⽤$nextTick确保数据渲染
this.$nextTick(()=>{
})
},
// ⽣成⼆维码
crateQrcode(){
形字组词
this.qr =new QRCode('qrcode',{
width:150,
height:150,// ⾼度
text:this.qrcode // ⼆维码内容
// render: 'canvas' // 设置渲染⽅式（有两种⽅式 table和canvas，默认是canvas）
// background: '#f0f'
// foreground: '#ff0'
})
// console.log(this.qrcode)
},
/
/ 关闭弹框，清除已经⽣成的⼆维码
closeCode(){
this.$refs.qrcode.innerHTML =''
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。