时间:2021-05-26
最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下:
1.引入二维码生成模块
注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置。
2.引入使用
备注:在main中设置全局可使用 Vue.prototype.qrCode
3.页面展示与配置
3.1 html代码
放置生成二维码图片的容器
3.2 js代码
js代码有三种放入位置
第一种:放置在mounted生命周期函数中
mounted() { new QRCode(this.$refs.qrCodeDiv, { text: "https://', 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 = "";
到此这篇关于vue中实现动态生成二维码的方法的文章就介绍到这了,更多相关vue 动态生成二维码内容请搜素以前的文章或下面相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
复制代码代码如下://////生成二维码//////生成二维码路径///生成的内容///二维码宽///二维码高///需生成的Logo图片///privateBi
与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo
本文实例讲述了PHP生成二维码与识别二维码的方法。分享给大家供大家参考,具体如下:二维码的分类线性堆叠式二维码矩阵式二维码二维码的优缺点优点信息容量大编码范围广
本文主要和大家分享php生成带二维码图片并强制下载实现代码,希望能帮助到大家实现一个自己的二维码。publicfunction测试(){//接
带logo的二维码生成分为两步骤:首先根据输入的内容生成二维码图片,然后读取本地的logo图片,通过图片处理生成带logo的二维码。生成的二维码效果如下:下面直