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图片预加载 JS实现图片预加载应用
Dec 03 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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
php笔记之常用文件操作
2010/10/12 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
JSONP跨域请求
2017/03/02 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
layui按条件隐藏表格列的实例
2019/09/19 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Python常用库推荐
2016/12/04 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python增加图像对比度的方法
2019/07/12 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
详解Python模块化编程与装饰器
2021/01/16 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
JSF界面控制层技术
2013/06/17 面试题
母亲节演讲稿范文
2014/01/02 职场文书
中国梦读书活动总结
2014/07/10 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL