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. 心路历程-安装Docker

    心路历程-安装Docker 本机环境 Windows10 激活HyperV功能 新建CentOS虚拟机 centos docker安装 由于是新的虚拟机,所以没有docker旧版本的问题,不需要卸载旧 ...

  2. [hdu2222]ac自动机(模板)

    题意:一个文本串+多个模板串的匹配问题 思路:裸的ac自动机. #pragma comment(linker, "/STACK:10240000,10240000") #inclu ...

  3. Crash-fix-1:PhoneWindow$DecorView{29b8ae38 V.E..... R.....I. 0,0-1160,607} not attached to window ma

    最近开始对APP上的Crash进行对应,发现有好多常见的问题,同一个问题在多个APP都类似的出现了,这里记录下这些常见的错误. crash log: java.lang.IllegalArgument ...

  4. 容器技术之LXC

    什么是容器?在生活中我们常见的容器有各种瓶瓶罐罐.各种能够容纳其它物料的东西叫容器:容器的特点就是有着很好的隔离作用,使得不同的物料互相隔离:除此之外容器还方便运输.方便储存:这是生活中所说的容器,以 ...

  5. 关于Tomcat+Nginx负载均衡与Jmeter服务器测压的日记

    Jmeter测压 1.Jmeter-5.1.1下载:http://mirror.bit.edu.cn/apache//jmeter/binaries/apache-jmeter-5.1.1.zip 2 ...

  6. 「雕爷学编程」Arduino动手做(25)——MQ2气敏检测模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

  7. 初涉WebGL

    之前一直在捣鼓Vue和React栈,对组件化架构项目有了些理解和体会.今天尝尝WebGL,当然,并不打算现在深入,只是略作了解,我知道这个坑很深. js的图形库.3d库也有好几款比较流行的,如游戏开发 ...

  8. 3.5 Go布尔型

    1.Go布尔型 一个布尔类型的值只有两种:true 和 false. if 和 for 语句的条件部分都是布尔类型的值,并且==和<等比较操作也会产生布尔型的值. package main im ...

  9. Java中JVM相关面试题-整理

    1.JVM内存模型 •程序计数器:当前线程字所执行节码的行号指示器,用于记录正在执行的虚拟机字节指令地址,线程私有. •Java虚拟机栈:存放基本数据类型,对象的引用,方法出口等,线程私有. •本地方 ...

  10. Scaner对象

    目录 Scaner的基本概念 基本语法: 1.使用next() 的方式来接收字符串(使用频率较少) 2.使用nextLine()的方式来接收字符串 进阶使用(练习题) Scaner的基本概念 之前我们 ...