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

网络编程 2021-07-04 15:02www.168986.cn编程入门

这篇文章主要介绍了vue中实现动态生成二维码的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

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

1.引入二维码生成模块

npm install qrcodejs2 --save

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

2.引入使用

import QRCode from 'qrcodejs2';

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

3.页面展示与配置

3.1 html代码

放置生成二维码图片的容器

<div id="qrCode" ref="qrCodeDiv"></div>

3.2 js代码

js代码有三种放入位置

第一种放置在mounted生命周期函数中

mounted() {
 new QRCode(this.$refs.qrCodeDiv, {
 text: "https://.baidu.",
 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://.baidu.",
  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://.baidu.',
  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 动态生成二维码内容请搜素狼蚁SEO以前的文章或狼蚁网站SEO优化相关文章，希望大家以后多多支持狼蚁SEO！

上一篇：纯js实现无缝滚动功能代码实例下一篇：nodejs使用socket5进行代理请求的实现

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设