二维码转换成短链接_二维码解析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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • IP地址划分[通俗易懂]

    IP地址划分[通俗易懂]IP地址划分1IP地址分类(1)A类IP地址一个A类IP地址由1字节的网络地址和3字节主机地址组成,网络地址的最高位必须是“0”,地址范围:1.0.0.1——126.255.255.254二进制表示为:00000001000000000000000000000001——01111110111111111111111111111110可用的A类网络有126个,每个网络能容纳…

    2022年6月11日
    51
  • 基于canoe 新建一个lin工程_canoe canalyzer 区别[通俗易懂]

    基于canoe 新建一个lin工程_canoe canalyzer 区别[通俗易懂]Vector发布了CANoe以及CANalyzer7.5新版本[2010-12-28]CANoe7.5新特性??改进了“Trace”窗口的用户菜单,集成了过滤器,并增加了……例如通过此控件选择配置文件等CANoeNumericUp/DownPanelHelpButtonCANoe、CANalyzerCANoePathDialogPictu…

    2022年6月16日
    33
  • 电脑翻页时钟屏保怎么设置_电脑桌面显示大屏时钟

    电脑翻页时钟屏保怎么设置_电脑桌面显示大屏时钟2019独角兽企业重金招聘Python工程师标准>>>…

    2022年9月29日
    2
  • QQ邮箱开启SMTP服务的步骤

    QQ邮箱开启SMTP服务的步骤

    2021年9月21日
    95
  • html5 替代css js,jsindexof替代办[通俗易懂]

    html5 替代css js,jsindexof替代办[通俗易懂]js中使用indexOf()方法是提示(对象不支持此属性或js中使用indexOf()方法是提示(对象不支持此属性或方法)解决办法:“对象不支持此属性或方法”表示javascript对象没有这个方法,无法调用,比如A.B()当A对象没有B方法的时候,会报这个异常。因为javascript是脚本语言,解释执行。js中IndexOf()是干什么用的呢?怎么用?varstr=”Hello…

    2022年7月26日
    7
  • 配置JAVA_HOME「建议收藏」

    配置JAVA_HOME「建议收藏」配置JAVA_HOME1、新建系统环境变量JAVA_HOME变量值为C:\ProgramFiles\Java\jdk-12.0.12、编辑Path添加%JAVA_HOME%\bin3、新建系统环境变量CLASSPATH,变量值为.;%Java_Home%\bin;%Java_Home%\lib\dt.jar;%Java_Home%\lib\tools.jar1、新建系统环境变量JAVA_HOM…

    2022年6月9日
    29

发表回复

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

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