项目中使用生成动态二维码"/>
vue项目中使用生成动态二维码
vue项目中使用QRCode.js生成二维码
看了好多blog,也尝试了多种方法,最后在QRCode.js文档上终于看懂了一些,一路踩着坑,终于做出了符合自己心意的东西。
1、环境准备
(1)、首先在项目中安装qrcodejs2:
npm i qrcodejs2
(2)、在组件中调用,我是在哪儿使用哪儿调用的。(ps:在main.js中引入会报错)
2、代码
<template> <div class="qrBox"> <h3>手机扫描,安全登录</h3> <div id="qrCode" ref="qrCodeDiv"></div> <p> <span @click="reg">免费注册</span> </p> </div>
</template><script> // 引入qrcode import QRCode from 'qrcodejs2'; export default { name: "loginCode", props:['codeName'], //是获取当前时间毫秒数,通过“父传子”方式传递下来data(){ return{ text:'' } }, methods:{ bindQRCode() { this.text = this.codeName; // new QRCode(this.$refs.qrCodeDiv, this.text) new QRCode(this.$refs.qrCodeDiv, { text: this.text.toFixed(0), //text必须是字符串width: 180, height: 180, colorDark: "#333333", //二维码颜色 colorLight: "#ffffff", //二维码背景色 correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H }) }, reg(){ this.$router.push("/adminLoginTwo") } }, mounted () { this.$nextTick(function () { this.bindQRCode(); }) } }
</script><style scoped lang="stylus"> .qrBox width: 100% height: 100% text-align center h3 line-height 40px margin-bottom 20px #qrCode width: 180px height: 180px margin 0 auto padding 10px border 1px solid #ddd p line-height 30px text-align right margin-top 30px padding-right 100px span cursor pointer
</style>
3、效果展示
4、踩坑记录
oooO ↘┏━┓ ↙ Oooo
( 踩)→┃你┃ ←(死 )
\ ( →┃√┃ ← ) /
_)↗┗━┛ ↖(_/
qrcodejs2的调用,需要在其使用的组件里调用,否则会报错
text 二维码的内容,必须是字符串格式
更多推荐
vue项目中使用生成动态二维码
发布评论