1、 首先需要安装相关的依赖包

npm install qrcodejs2 --save
或者
npm install qrcode2 --save

这里选择第二种方式进行安装,如图:

2、template中往需要展示的地方写入

<div id="qrcode" ref="qrcode"></div>

如图: class是自定义样式,不是必写参数。

3、script的methods中写入函数

qrcodeScan() { // 生成二维码
findShopInfo().then(res => {
new QRCode(document.getElementById('qrcode'), {
text: res.data.accessUrl, // 二维码地址
width: 100, // 二维码宽度
height: 100, // 二维码高度
correctLevel: QRCode.CorrectLevel.H // 二维码容错级别 H M L
})
})
}

二维码地址:res.data.accessUrl,是后台提供的。如果是定死的链接网址,可以将改text

text:'https://www.cnblogs.com', // 二维码地址

4、在mounted中调用这个二维码函数就完成了二维码展示

mounted() {
this.qrcodeScan()
},

本人实现效果如下图:

希望这篇文章可以帮到你!

本文参考博客链接:https://blog.csdn.net/liurong1028/article/details/84849813  、 https://blog.csdn.net/xuaner8786/article/details/82250830

Vue中将网址、动态网址转为二维码的更多相关文章

  1. js将网址转为二维码并下载图片

    将一个网址转为二维码, 下面可以添加文字, 还提供下载功能 利用的是 GitHub上面的qrcode.js 和canvas <!DOCTYPE html> <html> < ...

  2. demo:动态生成专属二维码

    在日常生活中,随处可见二维码,那么js如何生成动态的专属二维码?其实,通过"二维码插件"我们可以快速生成二维码.在这,记录一下的生成专属二维码demo,一起来看看jquery.qr ...

  3. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

  4. VUE使用QRcode或者vue-qr生成二维码

    这里介绍两种vue生成二维码的方法 QRcode vue-qr vue-qr比QRcode功能多在可以在中间加logo 下面先介绍QRcode vue里安装qrcodejs的npm包 npm inst ...

  5. html2canvas以及domtoimage的使用踩坑总结 动态获取的二维码失效如何生成海报

    //判断手机为安卓还是ios 安卓html2canvas方法 ios系统dom-to-image方法 $(".code").click(function() { var u = n ...

  6. Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法

    // 下载二维码图片的方法 saveImg() { var self = this; html2canvas(document.querySelector(".savePic"), ...

  7. 记一次vue 普通异步请求微信二进制二维码 乱码 问题解决然后渲染

    后端压力大,前端分忧. /*用微信小程序token拿二维码*/ async fetchMINIQRcode({commit,state},params){ var instance = axios.c ...

  8. 将url动态转换成二维码插件 - 兼容IE8

    插件地址  http://static.runoob.com/assets/qrcode/qrcode.min.js ,网页直接打开,然后ctrl+s保存到本地. <!DOCTYPE html& ...

  9. 分享几个网址二维码生成api

    分享几个网址二维码生成api 传入网址参数,或许二维码图片,扫二维码能直接跳转网址 http://b.bshare.cn/barCode?site=weixin&url=https://www ...

随机推荐

  1. 使用Proteus模拟操作HDG12864F-1液晶屏

    在Proteus中模拟了89C52操作HDG12864F-1液晶屏,原理图如下: 一.HDG12864F-1官网信息 该液晶屏是Hantronix的产品,官网上搜索出这个型号是系列型号中的一种,各种型 ...

  2. 一文带你了解Spring核心接口Ordered的实现及应用

    前言 最近在看框架的时候,发现了这个接口,在此进行总结,希望能够给大家帮助,同时提升自己. order接口的大体介绍 Spring框架中有这个一个接口,名字叫Ordered,联想我们在数据库中应用的O ...

  3. Millar Robin模板

    \(Millar Robin\)模板 hdu2138 \(Code\) #include <cstdio> #include <iostream> #include <a ...

  4. unittest详解 跳过用例的执行(skip)

    在执行测试用例时,有时候有些用例是不需要执行的,那我们怎么办呢?难道删除这些用例?那下次执行时如果又需要执行这些用例时,又把它补回来?这样操作就太麻烦了. unittest提供了一些跳过指定用例的方法 ...

  5. React:Component

    web开发由web pages过渡到web app 后,开发的模式也发生了变化,由传统的主张结构.样式.行为分离到现在的组件化,把应用的各个部分看成解耦的部分,每部分自包含js.css和html,以方 ...

  6. Docker的安装(Linux)

    官网下载安装说明 1.卸载旧版本 sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ doc ...

  7. linux常用命令---PATH与防火墙

    linux的路径PATH 防火墙

  8. 使用Xtrabackup进行MySQL备份 zz

    zz from  http://www.magedu.com/ 一.安装 1.简介 Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对i ...

  9. strom_hdfs与Sequence详解

    这片博客主要是讲解storm-hdfs,Squence及它们的trident方法使用,不多说上代码: pom.xml <dependency> <groupId>org.apa ...

  10. 对比Memcached和Redis,谁才是适合你的缓存?

    Memcached vs Redis 近期公司采购软件,评估时,某软件谈到使用了 Memcached 和 Redis 缓存.在本文中,将研究这两个流行的缓存的异同,方便理解和记忆. 1. Memcac ...