Vue中将网址、动态网址转为二维码
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中将网址、动态网址转为二维码的更多相关文章
- js将网址转为二维码并下载图片
将一个网址转为二维码, 下面可以添加文字, 还提供下载功能 利用的是 GitHub上面的qrcode.js 和canvas <!DOCTYPE html> <html> < ...
- demo:动态生成专属二维码
在日常生活中,随处可见二维码,那么js如何生成动态的专属二维码?其实,通过"二维码插件"我们可以快速生成二维码.在这,记录一下的生成专属二维码demo,一起来看看jquery.qr ...
- 微信小程序动态生成保存二维码
起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...
- VUE使用QRcode或者vue-qr生成二维码
这里介绍两种vue生成二维码的方法 QRcode vue-qr vue-qr比QRcode功能多在可以在中间加logo 下面先介绍QRcode vue里安装qrcodejs的npm包 npm inst ...
- html2canvas以及domtoimage的使用踩坑总结 动态获取的二维码失效如何生成海报
//判断手机为安卓还是ios 安卓html2canvas方法 ios系统dom-to-image方法 $(".code").click(function() { var u = n ...
- Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法
// 下载二维码图片的方法 saveImg() { var self = this; html2canvas(document.querySelector(".savePic"), ...
- 记一次vue 普通异步请求微信二进制二维码 乱码 问题解决然后渲染
后端压力大,前端分忧. /*用微信小程序token拿二维码*/ async fetchMINIQRcode({commit,state},params){ var instance = axios.c ...
- 将url动态转换成二维码插件 - 兼容IE8
插件地址 http://static.runoob.com/assets/qrcode/qrcode.min.js ,网页直接打开,然后ctrl+s保存到本地. <!DOCTYPE html& ...
- 分享几个网址二维码生成api
分享几个网址二维码生成api 传入网址参数,或许二维码图片,扫二维码能直接跳转网址 http://b.bshare.cn/barCode?site=weixin&url=https://www ...
随机推荐
- 使用Proteus模拟操作HDG12864F-1液晶屏
在Proteus中模拟了89C52操作HDG12864F-1液晶屏,原理图如下: 一.HDG12864F-1官网信息 该液晶屏是Hantronix的产品,官网上搜索出这个型号是系列型号中的一种,各种型 ...
- 一文带你了解Spring核心接口Ordered的实现及应用
前言 最近在看框架的时候,发现了这个接口,在此进行总结,希望能够给大家帮助,同时提升自己. order接口的大体介绍 Spring框架中有这个一个接口,名字叫Ordered,联想我们在数据库中应用的O ...
- Millar Robin模板
\(Millar Robin\)模板 hdu2138 \(Code\) #include <cstdio> #include <iostream> #include <a ...
- unittest详解 跳过用例的执行(skip)
在执行测试用例时,有时候有些用例是不需要执行的,那我们怎么办呢?难道删除这些用例?那下次执行时如果又需要执行这些用例时,又把它补回来?这样操作就太麻烦了. unittest提供了一些跳过指定用例的方法 ...
- React:Component
web开发由web pages过渡到web app 后,开发的模式也发生了变化,由传统的主张结构.样式.行为分离到现在的组件化,把应用的各个部分看成解耦的部分,每部分自包含js.css和html,以方 ...
- Docker的安装(Linux)
官网下载安装说明 1.卸载旧版本 sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ doc ...
- linux常用命令---PATH与防火墙
linux的路径PATH 防火墙
- 使用Xtrabackup进行MySQL备份 zz
zz from http://www.magedu.com/ 一.安装 1.简介 Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对i ...
- strom_hdfs与Sequence详解
这片博客主要是讲解storm-hdfs,Squence及它们的trident方法使用,不多说上代码: pom.xml <dependency> <groupId>org.apa ...
- 对比Memcached和Redis,谁才是适合你的缓存?
Memcached vs Redis 近期公司采购软件,评估时,某软件谈到使用了 Memcached 和 Redis 缓存.在本文中,将研究这两个流行的缓存的异同,方便理解和记忆. 1. Memcac ...