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


Posted in Javascript onFebruary 21, 2020

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

1.引入二维码生成模块

npm install qrcodejs2 --save

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

2.引入使用

import QRCode from 'qrcodejs2';

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

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

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 = "";

到此这篇关于vue中实现动态生成二维码的方法的文章就介绍到这了,更多相关vue 动态生成二维码内容请搜素三水点靠木以前的文章或下面相关文章,希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
JS如何把字符串转换成json
Feb 21 #Javascript
简单了解JS打开url的方法
Feb 21 #Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 #Javascript
如何基于js判断浏览器版本
Feb 20 #Javascript
微信小程序webSocket的使用方法
Feb 20 #Javascript
Javascript Worker子线程代码实例
Feb 20 #Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 #Vue.js
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
js 作用域和变量详解
2017/02/16 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
python删除文件示例分享
2014/01/28 Python
python对html代码进行escape编码的方法
2015/05/04 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
网络工程师专家职业发展路线
2014/02/14 职场文书
促销活动总结范文
2014/04/30 职场文书
离婚协议书范本样本
2014/08/19 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
财政局个人年终总结
2015/03/03 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书