当前位置: 首页 > 编程笔记 >

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

卫振
2023-03-14
本文向大家介绍vue中实现动态生成二维码的方法,包括了vue中实现动态生成二维码的方法的使用技巧和注意事项,需要的朋友参考一下

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

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://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 动态生成二维码内容请搜素小牛知识库以前的文章或下面相关文章,希望大家以后多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍Java实现二维码生成的代码方法,包括了Java实现二维码生成的代码方法的使用技巧和注意事项,需要的朋友参考一下 1、支持QRcode、ZXing 二维码生成、解析; 2、QRCode 方式生成二维码支持添加图片,如下:

  • 说明 用于软件端生成点菜二维码 请求地址 http://api.dc78.cn/Api/do_qr_order 请求方式 GET 请求参数 table=桌台号 expire=60(过期时间,分钟)此参数不传默认30分钟 返回 {"status":"1","code_url":"https:\/\/wx.dc78.cn\/t_BuUG4","token":"t_BuUG4","expire":30,

  • 此协议用于开台时生成动态点餐二维码,可以打印到桌台留台单上,客人用来扫码点餐,正餐模式比较适用。 相比固定桌台二维码的好处是可以控制一码只能一次消费使用。桌台结账后可以主动调用1.6来使二维码失效。 请求参数说明 参数 描述 必填 示例值 类型 最大长度 action 接口参数组 是 object └action 需要调用的接口名称 是 do_qr_order string get GET参数组,

  • 本文向大家介绍Symfony生成二维码的方法,包括了Symfony生成二维码的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Symfony生成二维码的方法。分享给大家供大家参考,具体如下: 现在网上能搜到很多关于使用PHP生成二维码的例子,主要是两种方法: 第一种:google开放api,如下: 附:API接口地址 https://developers.google.com/char

  • 本文向大家介绍java二维码生成的方法,包括了java二维码生成的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了java二维码的实现代码,供大家参考,具体内容如下 这次用到的jar包是zxing,没有用到core的jar包 先导入zxing.jar包 生成二维码 解析二维码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍C#生成二维码的方法,包括了C#生成二维码的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了C#生成二维码的方法。分享给大家供大家参考。具体实现方法如下: 首先引用ThoughtWorks.QRCode.dll 具体代码如下: 使用示例如下: PS:本站还提供了一个功能非常强大的二维码生成工具,感兴趣的朋友可以参考一下: http://tools.jb51.net/tra