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 ...
随机推荐
- Git使用教程之SSH连接方式配置(二)
什么是GitHub?这个网站就是提供Git仓库托管服务的. 什么是SSH Key?你的本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,大白话理解就是这两个仓库如果要进行远程同步,则我们需 ...
- Qt5.5 connection firebird on Linux Centos7.2 or windows
windows c++ 项目移植到 linux,原项目需要连接 Firebird数据库. google 后知道 linux qt connection Firebird 有两种方法: 1.ibpp c ...
- html之常用input type
单选框,用name区分是否为一组,value表示提交时的值,checked表示被勾选 <input type="radio" name="sex" val ...
- 【hdu1030】“坐标表示法”
http://acm.hdu.edu.cn/showproblem.php?pid=1030 算法:以顶点为原点,建立坐标系,一个数可以唯一对应一个三元组(x, y, z),从任意一个点出发走一步,刚 ...
- hive数据仓库入门到实战及面试
第一章.hive入门 一.hive入门手册 1.什么是数据仓库 1.1数据仓库概念 对历史数据变化的统计,从而支撑企业的决策.比如:某个商品最近一个月的销量,预判下个月应该销售多少,从而补充多少货源. ...
- python爬虫-vmgirls-正则表达式
概述 本次爬虫任务是爬取图片网站图片,网址是https://www.vmgirls.com/ 分析网页 第一步,打开需要爬取的页面https://www.vmgirls.com/13344.html ...
- orcle增删改操作及alter修改表字段操作
orcle增删改操作:操作前确保当前用户有增删改的权限. --创建表 create table itcast( pid ), pname ) ); drop table itcast; --复制表 c ...
- Docker镜像下载及加速器设置
docker远程仓库配置: vim ~/.docker/daemon.json { "registry-mirrors" : [ "https://registry.do ...
- RBAC在Django中基于中间件的AJAX应用案例
项目文件: models.py from django.db import models from django.contrib.auth.models import AbstractUser # ...
- POJ1436
题目链接:https://vjudge.net/problem/POJ-1436 解题思路:基于y轴建立线段树. 如图是根据样例画出的图.下面都以题目样例为例. 但是,如果仅仅以给出的y1, y2为边 ...