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 动态生成二维码内容请搜素我们以前的文章或下面相关文章，希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 在Vue中用canvas实现二维码和图片合成海报的方法

    在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载 简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报 1. 设置相应比例 一般来说海报背景都是固定的,可以直接放在public文件夹,二维码可根据后台返回数据,也可用canvas生成,在此不多赘述 import posterBgImg from '../public/images/poster_bg.png';// 海报底图 import qrcodeImg from '../public/images/qr

  • Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    这几天做个了项.就是微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法. 问题 机型:iphone 7p 这里的二维码是一张图片,微信返回的图片,具体下图 然后是正常情况下.当我们开始扫码的时,应该是这个样子 这个是正常的,但是在苹果端的时候就懵了,下面的菜单就只有一个保存图片.那么如何解决呢,请看下面. 解决方案 解决方案其实有两种. 使用 qrcodeJs 就

  • Vue实现手机扫描二维码预览页面效果

    本文实例为大家分享了Vue实现手机扫描二维码预览页面的具体代码,供大家参考,具体内容如下 背景:vue-cli3 + ant-design-vue 搭建的后台管理系统 需求:实现扫描二维码即可在手机预览H5页面功能 使用插件:qrcode step1:安装插件 npm install qrcode --save step2:引入插件 在项目中新建QRcode.vue文件 <template> <div id="qrCode"> <div id="

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

    最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下: 1.引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置. 2.引入使用 import QRCode from 'qrcodejs2'; 备注:在main中设置全局可使用 Vue.prototype.qrCode 3.

  • 使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中.Jquery.Qrcode主要包括以下参数设置: •render 定义二维码的渲染方式,有table和canvas两种渲染方式 •width 定义二维码的宽度 •height 定义二维码的高度 •text 定义二维码内容 •typeNumber 二维码的计算

  • 微信小程序动态生成二维码的实现代码

    微信小程序动态生成二维码的实现代码

    效果图如下: 实现 wxml <!-- 存放二维码的图片--> <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image> </view> <!-- 画布,用来画二维码,只用来站位,不用来显示--> <view class=&qu

  • JavaScript动态生成二维码图片

    1.html代码 <div id="qrcode" style="width:200px; height:200px;position: fixed;bottom: 40%; right: 20%;"></div> 2.引入外部js文件 <script src="QRCode.js"></script> 3.方法调用 var qrcode = new QRCode(document.getEleme

  • 用python生成(动态彩色)二维码的方法(使用myqr库实现)

    最近真的感觉到了python生态的强大(倒吸一口凉气) 现在介绍一个可以生成动态二维码的库(myqr) 效果如图: 第一步要安装myqr库 在cmd中直接用pip安装 pip install myqr 第二步 from MyQR import myqr import os version, level, qr_name = myqr.run( words="https://www.baidu.com", # 可以是字符串,也可以是网址(前面要加http(s)://) version=1

  • 详解ZXing-core生成二维码的方法并解析

    二维码无处不在,扫一扫有礼品哦,现在二维码这么流行,想必大家不是很清楚二维码是怎么生成的吧,现在小编通过给大家分享本文帮助大家学习二维码生成的方法. 其实主要是利用goggle发布的jar来使用的此功能. 1.二维码的生成 将Zxing-core.jar 包加入到classpath下. 二维码的生成需要借助MatrixToImageWriter类,该类是由Google提供的,可以将该类拷贝到源码中,这里我将该类的源码贴上,可以直接使用. 直接可以生成二维码的代码 public void test

  • Python基于QRCode实现生成二维码的方法【下载,安装,调用等】

    本文实例讲述了Python基于QRCode实现生成二维码的方法.分享给大家供大家参考,具体如下: QR码是一种矩阵码,或二维空间的条码,1994年由日本Denso-Wave公司发明.QR是英文Quick Response的缩写,即快速反应的意思,源自发明者希望QR码可让其内容快速被解码.QR码常见於日本,并为目前日本最流行的二维空间条码.QR码比普通条码可储存更多资料,亦无需像普通条码般在扫描时需直线对准扫描器. qrcode是Python的第三方模块,依赖于Python 图像库:PIL(Pyt

  • Python实现将文本生成二维码的方法示例

    本文实例讲述了Python实现将文本生成二维码的方法.分享给大家供大家参考,具体如下: #coding:utf-8 ''' Python生成二维码 v1.0 主要将文本生成二维码图片 测试一:将文本生成白底黑字的二维码图片 测试二:将文本生成带logo的二维码图片 ''' __author__ = 'Xue' import qrcode from PIL import Image import os #生成二维码图片 def make_qr(str,save): qr=qrcode.QRCode

  • ASP.NET生成二维码的方法总结

    本文实例总结了ASP.NET生成二维码的方法.分享给大家供大家参考,具体如下: 分享一例c#生成二维码的代码,直接引用ThoughtWorks.QRCode.dll 类生成二维码,有需要的朋友参考下. 方法1.直接引用ThoughtWorks.QRCode.dll 类,生成二维码. 代码示例: ThoughtWorks.QRCode.Codec.QRCodeEncoder encoder = new QRCodeEncoder(); encoder.QRCodeEncodeMode = QRCo

  • Symfony生成二维码的方法

    本文实例讲述了Symfony生成二维码的方法.分享给大家供大家参考,具体如下: 现在网上能搜到很多关于使用PHP生成二维码的例子,主要是两种方法: 第一种:google开放api,如下: $urlToEncode="http://blog.it985.com"; generateQRfromGoogle($urlToEncode); function generateQRfromGoogle($chl, $widhtHeight = '150', $EC_level = 'L', $m

随机推荐