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 相关文章推荐
解读JavaScript中 For, While与递归的用法
May 07 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 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
PHP 的 __FILE__ 常量
2007/01/15 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
jsTree使用记录实例
2016/12/01 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
python中的装饰器详解
2015/04/13 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python3监控疫情的完整代码
2020/02/20 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
俄罗斯商务邀请函
2014/01/26 职场文书
军神教学反思
2014/02/04 职场文书
2014年技术员工作总结
2014/11/18 职场文书
少先队工作总结2015
2015/05/13 职场文书
教师节晚会主持词
2015/06/30 职场文书
JavaScript的Set数据结构详解
2022/02/18 Javascript