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. Git使用教程之SSH连接方式配置(二)

    什么是GitHub?这个网站就是提供Git仓库托管服务的. 什么是SSH Key?你的本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,大白话理解就是这两个仓库如果要进行远程同步,则我们需 ...

  2. Qt5.5 connection firebird on Linux Centos7.2 or windows

    windows c++ 项目移植到 linux,原项目需要连接 Firebird数据库. google 后知道 linux qt connection Firebird 有两种方法: 1.ibpp c ...

  3. html之常用input type

    单选框,用name区分是否为一组,value表示提交时的值,checked表示被勾选 <input type="radio" name="sex" val ...

  4. 【hdu1030】“坐标表示法”

    http://acm.hdu.edu.cn/showproblem.php?pid=1030 算法:以顶点为原点,建立坐标系,一个数可以唯一对应一个三元组(x, y, z),从任意一个点出发走一步,刚 ...

  5. hive数据仓库入门到实战及面试

    第一章.hive入门 一.hive入门手册 1.什么是数据仓库 1.1数据仓库概念 对历史数据变化的统计,从而支撑企业的决策.比如:某个商品最近一个月的销量,预判下个月应该销售多少,从而补充多少货源. ...

  6. python爬虫-vmgirls-正则表达式

    概述 本次爬虫任务是爬取图片网站图片,网址是https://www.vmgirls.com/ 分析网页 第一步,打开需要爬取的页面https://www.vmgirls.com/13344.html ...

  7. orcle增删改操作及alter修改表字段操作

    orcle增删改操作:操作前确保当前用户有增删改的权限. --创建表 create table itcast( pid ), pname ) ); drop table itcast; --复制表 c ...

  8. Docker镜像下载及加速器设置

    docker远程仓库配置: vim ~/.docker/daemon.json { "registry-mirrors" : [ "https://registry.do ...

  9. RBAC在Django中基于中间件的AJAX应用案例

    项目文件:   models.py from django.db import models from django.contrib.auth.models import AbstractUser # ...

  10. POJ1436

    题目链接:https://vjudge.net/problem/POJ-1436 解题思路:基于y轴建立线段树. 如图是根据样例画出的图.下面都以题目样例为例. 但是,如果仅仅以给出的y1, y2为边 ...