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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
Javascript打印网页部分内容的脚本
Nov 17 Javascript
JavaScript类库D
Oct 24 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 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中的串行化变量和序列化对象
2006/09/05 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
python使用udp实现聊天器功能
2018/12/10 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
Python如何将字符串转换为日期
2020/07/31 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
九月份红领巾广播稿
2014/01/22 职场文书
初中化学教学反思
2014/01/23 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
《四季》教学反思
2014/04/08 职场文书
温馨提示标语
2014/06/26 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
2014年就业工作总结
2014/11/26 职场文书
代理词怎么写
2015/05/25 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python