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 面向对象思想 附源码
Jul 07 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
浅谈javascript中return语句
Jul 15 Javascript
13个PHP函数超实用
Oct 21 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
layUI实现三级导航菜单效果
Jul 26 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 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
php操作MongoDB类实例
2015/06/17 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
构建一个JavaScript插件系统
2020/10/20 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
详解python中的异常捕获
2020/12/15 Python
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
犯错检讨书
2014/02/21 职场文书
商场主管竞聘书
2014/03/31 职场文书
采购意向书范本
2014/03/31 职场文书
销售2014年度工作总结
2014/12/08 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书