金狮镖局 Design By www.egabc.com
最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下:
1.引入二维码生成模块
npm install qrcodejs2 --save
注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置。
2.引入使用
import QRCode from 'qrcodejs2';
备注:在main中设置全局可使用 Vue.prototype.qrCode
3.页面展示与配置
3.1 html代码
放置生成二维码图片的容器
<div id="qrCode" ref="qrCodeDiv"></div>
3.2 js代码
js代码有三种放入位置
第一种:放置在mounted生命周期函数中
mounted() { new QRCode(this.$refs.qrCodeDiv, { text: "https://www.baidu.com", width: 200, height: 200, colorDark: "#333333", //二维码颜色 colorLight: "#ffffff", //二维码背景色 correctLevel: QRCode.CorrectLevel.L //容错率,L/M/H }); }
第二种:放置在created生命周期函数中,但是注意一定要放在this.$nextTick的回掉函数中
created() { this.$nextTick(function() { new QRCode(this.$refs.qrCodeDiv, { text: "https://www.baidu.com", width: 200, height: 200, colorDark: "#333333", //二维码颜色 colorLight: "#ffffff", //二维码背景色 correctLevel: QRCode.CorrectLevel.L //容错率,L/M/H }); }); },
第三种方式:放置在methods属性中的指定方法中,并且在mouted生命周期函数中调用这个方法(最好也把这个方法的调用放置在this.$nextTick的回掉函数中)
mounted: function () { this.$nextTick(function () { this.bindQRCode(); }) }, methods: { bindQRCode: function () { new QRCode(this.$refs.qrCodeDiv, { text: 'https://www.baidu.com', width: 200, height: 200, colorDark: "#333333", //二维码颜色 colorLight: "#ffffff", //二维码背景色 correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H }) } }
4.注意点
1.显示内容(text所指向内容)必须是UTF-8编码格式。
2.生成二维码js必须在 this.$nextTick(function(){调用})或setTimeout(() => { 调用 }, 100),是为了确保二维码容器DOM已经存在。
3.为了防止重复生成二维码,使用置空进行控制:document.getElementById("qrcode").innerHTML = "";
金狮镖局 Design By www.egabc.com
金狮镖局
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金狮镖局 Design By www.egabc.com
暂无vue中实现动态生成二维码的方法的评论...
更新日志
2024年09月27日
2024年09月27日
- 纯音入心系列纯音乐《中央民族乐团-古筝传奇》1CD[MP3][253.1MB]
- 江玲.1989-这样你才爱我,是吗?【新作有声】【WAV+CUE】
- 郭美美.2010-我是郭美美【华纳】【WAV+CUE】
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]