欢迎访问优讯网!
您当前的位置:首页 > 爱编程

vue中实现动态生成二维码的方法

时间:2020-02-21 10:56:51  来源:优讯网  作者:小卡司  浏览次数:
这篇文章主要介绍了vue中实现动态生成二维码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
 

最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下:

1.引入二维码生成模块

1 npm install qrcodejs2 --save

注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置。

2.引入使用

1 import QRCode from 'qrcodejs2';

备注:在main中设置全局可使用 Vue.prototype.qrCode

3.页面展示与配置

3.1 html代码

放置生成二维码图片的容器

1 <div id="qrCode" ref="qrCodeDiv"></div>

3.2 js代码

js代码有三种放入位置

第一种:放置在mounted生命周期函数中

1
2
3
4
5
6
7
8
9
10
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的回掉函数中

1
2
3
4
5
6
7
8
9
10
11
12
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的回掉函数中)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 = "";

到此这篇关于vue中实现动态生成二维码的方法的文章就介绍到这了

来顶一下
返回首页
返回首页

原文链接:https://www.jb51.net/article/180979.htm


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
    无相关信息
栏目更新
栏目热门