二维码转换成短链接_二维码解析url

二维码转换成短链接_二维码解析urlVue生成二维码实战案例,vue把url地址转化为二维码手机扫码打开

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

代码

npm install qrcodejs2 --save

代码引入到项目中,不需要再main.js做处理,只需要在使用的vue页面中引入。

在页面中使用

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

<script> // 需要在页面中引入 import QRCode from 'qrcodejs2' export default{ 
      components:{ 
      QRCode }, data(){ 
      return{ 
      } } ... } </script>

生成二维码

mounted() { 
   
   	 this.qrcodeScan();    // 注:需在mounted里触发qrcodeScan函数
   }
methods:{ 
   
	qrcodeScan() { 
    //生成二维码
		let qrcode = new QRCode(document.getElementById("qrcode"), { 
   
		width: 150, // 二维码宽度 
		height: 150, // 二维码高度
		text: window.location.href, // 浏览器地址url
		colorDark: "#000000",
		colorLight: "#ffffff",
		correctLevel: QRCode.CorrectLevel.H,
		})
		// console.log(window.location.href);
	},
},

text为二维码扫码打开之后的链接
这里把url地址转化为二维码。实现pc端页面,扫码打开手机端。


如图
在这里插入图片描述
我本来还想用获取路由,然后路由拼接上前缀,
发现这样不灵活,只能路径写死 万一改域名之类的 就会出问题
然后发现了

window.location.href // 浏览器地址url

直接用这个,反正手机端和pc端地址是一样的

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/188792.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 第十一章 :日志采集工具flume使用

    第十一章 :日志采集工具flume使用第十一章 :日志采集工具flume使用

    2022年4月23日
    54
  • 解决cron不执行的问题

    解决cron不执行的问题

    2021年11月9日
    51
  • Shift 后门 简单学习

    Shift 后门 简单学习https://www.cnblogs.com/BOHB-yunying/p/11695140.html过程参考上文链接提出问题:整个过程并不复杂,但要实现攻击的前提条件,是已经打入目标主机,将C:\windows\system32\sethc.exe替换成C:\windows\system32\cmd.exe,所以这一步到底要如何做到?明白shift后门是如何产生的就是windows系统自带的5次shift键强制打开C:\windows\system32\sethc.exe,为了..

    2026年1月17日
    7
  • jmeter性能测试步骤入门_jmeter接口性能测试

    jmeter性能测试步骤入门_jmeter接口性能测试原文转自:https://blog.csdn.net/lovesoo/article/details/78579547ApacheJMeter是一款纯java编写负载功能测试和性能测试开源工具软件。相比Loadrunner而言,JMeter小巧轻便且免费,逐渐成为了主流的性能测试工具,是每个测试人员都必须要掌握的工具之一。本文为JMeter性能测试完整入门篇,从Jmeter下载安装到编写一个完整…

    2022年10月4日
    2
  • QLineEdit光标问题

    QLineEdit光标问题QLineEdit 的光标当失去焦点后仍然显示的问题 nbsp nbsp 在 lineedit 和其它按钮之间切换焦点时 注意 lineedit 的设置有顺序 否则当失去焦点时仍有光标闪 或者得到焦点无光标 nbsp nbsp 使 lineedit 有效 lineedit gt setEnabled true lineedit gt setFocus nbsp nbsp nbsp nbsp 使 lineedit 无效 l

    2025年12月4日
    5
  • java之模糊查询「建议收藏」

    java之模糊查询「建议收藏」1.场景还原由于项目中有很多地方设置了搜索框,所以搜索框之模糊查询势在必得;今晚笔者将详细讲解java之模糊查询的细节及要点,希望能给大伙带来启发。2.实现方案后台代码:①UserInfo实体类的定义publicclassUserInfo{privateStringusername;privateIntegerage;pr

    2022年5月30日
    45

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号