前端自动生成二维码并长按识别跳转 Vue

  1. 下载arale-qrcode依赖:
npm i arale-qrcode --save
  1. 引用依赖:
import AraleQRCode from "arale-qrcode";
  1. 代码部分:
<template><div class="container">// 生成二维码按钮<van-button @click="getErweima">点击生成二维码</van-button>// 生成二维码弹窗<van-overlay :show="show">  <div class="wrapper"><img :src="img" /></div></van-overlay></div>
</template><script>
import AraleQRCode from "arale-qrcode";  //引入依赖
export default {name: "index",data() {return {show: false,img: "",};},mounted() {},methods: {makeCode() {const result = new AraleQRCode({render: "svg",text: "http://www.baidu.com",size: 120,});// 将svg xml文档转换成字符串const svgXml = new XMLSerializer().serializeToString(result);// 将svg字符串转成base64格式,通过 window.btoa方法创建一个 base-64 编码的字符串,进行二次编码解码(encodeURIComponent 字符串进行编码和解码,unescape 进行解码)。const src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgXml)));localStorage.setItem("image", src);this.getImg();},// 获取存储的图片给到页面getImg() {this.img = localStorage.getItem("image");localStorage.removeItem("image");},getErweima() {this.show = truethis.makeCode()},},
};
</script>
<style lang="scss" scoped></style>

Learning is like the fennel, but without its increase, it has its own advantages.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/690787.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Vue3】路由传参的几种方式

路由导航有两种方式&#xff0c;分别是&#xff1a;声明式导航 和 编程式导航 参数分为query参数和params参数两种 声明式导航 query参数 一、路径字符串拼接(不推荐) 1.传参 在路由路径后直接拼接?参数名:参数值 &#xff0c;多组参数间使用&分隔。 <RouterLink …

unity学习(27)——修改text控件的内容

手游最大的特点就是简单易懂好上手。 1.在canvas上添加一个text的UI&#xff0c;内容设置为空。在字体处添加宋体&#xff0c;增加一个tag。 2.修改LoginHandler中的内容如下&#xff1a;&#xff08;之前有从inputFiled中获取文字的经验&#xff09; public void LoginHandl…

阿里云幻兽帕鲁服务器,游戏服务端版本升级怎么操作?

用阿里云一键部署的幻兽帕鲁服务器&#xff0c;想要更新游戏服务端版本&#xff0c;现在非常简单。之前还需要通过输入一行命令来更新&#xff0c;而现在可以直接通过面板上的选型来操作。 打开阿里云的计算巢&#xff0c;找到你的这台服务实例&#xff0c;点击进入&#xff0…

Python语法和javascript有哪些异同?

Python和JavaScript是两种流行的编程语言&#xff0c;它们在语法和用途上有一些异同。 1、语法异同&#xff1a; 变量声明&#xff1a;Python不需要显式声明变量的类型&#xff0c;而JavaScript则使用 var, let 或 const 关键字声明变量。 语句结束符&#xff1a;Python使用换…

通过HTTP隧道在Linux上实现跨域资源共享(CORS):打破数字世界的“门禁”

在数字世界里&#xff0c;有时你会碰到一些“门禁”&#xff0c;它们阻止你访问某些资源&#xff0c;就像现实生活中的门禁系统一样。这些“门禁”就是所谓的跨域资源共享&#xff08;CORS&#xff09;限制。不过别担心&#xff0c;我们有一个绝妙的解决方案&#xff1a;通过HT…

模板(函数模板)---C++

模板目录 模板1.模板概念&#xff12;.泛型编程 1.函数模板1.1 函数模板语法1.2 函数模板注意事项1.3 普通函数与函数模板的区别1.4 普通函数与函数模板的调用规则1.5 模板的局限性1.6 函数模板案例 模板 1.模板概念 模板就是建立通用的模具&#xff0c;大大提高复用性。 模板…

安防监控平台EasyCVR升级之后添加通道进行播放,提示“请确认播放协议配置选项”是什么原因?

智慧安防平台EasyCVR能在复杂的网络环境中&#xff08;专网、局域网、广域网、VPN、公网等&#xff09;将前端海量的设备进行统一集中接入与视频汇聚管理&#xff0c;平台可支持的接入协议包括&#xff1a;国标GB28181、RTSP/Onvif、RTMP&#xff0c;以及厂家的私有协议与SDK&a…

GO框架基础 (二)、sqlx库

在 Go 语言中&#xff0c;sqlx 包是一个用于数据库操作的库&#xff0c;它建立在标准库的 database/sql 包之上&#xff0c;并提供了一些额外的功能&#xff0c;以简化和增强与数据库的交互。sqlx 的目标是通过提供更方便的 API 和一些附加功能来改善在 Go 中进行 SQL 数据库查…

文献速递:GAN医学影像合成--联邦生成对抗网络基础医学图像合成中的后门攻击与防御

文献速递&#xff1a;GAN医学影像合成–联邦生成对抗网络基础医学图像合成中的后门攻击与防御 01 文献速递介绍 虽然深度学习在医疗保健研究中产生了显著影响&#xff0c;但其在医疗保健领域的影响无疑比在其他应用领域更慢、更有限。造成这种情况的一个重要原因是&#xff…

码蹄集新手村MT1241-总结

这道题可以通过手写排序算法&#xff0c;完成从大到小排序后再输出 这里提供另外一种思路 了解c中sort()函数。sort()函数可以对给定区间所有元素进行排序。它有三个参数sort(begin, end, cmp)&#xff0c;其中begin为指向待sort()的数组的第一个元素的指针&#xff0c;end为…

nginx rewrite指令的深入理解

目录 1. 指令格式2. rewrite指令3. break指令4. return指令 nginx提供了强大的url rewrite功能。在nginx http模块的11个处理阶段中&#xff0c;有NGX_HTTP_SERVER_REWRITE_PHASE和NGX_HTTP_REWRITE_PHASE两个阶段来进行url rewrite的处理。而last、break、redirect、permenent…

政安晨:【完全零基础】认知人工智能(四)【超级简单】的【机器学习神经网络】—— 权重矩阵

预备 如果小伙伴们第一次看到这篇文章&#xff0c;同时也对这类知识还是稍感陌生的话&#xff0c;可以先看看我这个系列的前三篇文章&#xff1a; 政安晨&#xff1a;【完全零基础】认知人工智能&#xff08;一&#xff09;【超级简单】的【机器学习神经网络】 —— 预测机ht…

【vue】组件通信方式介绍

当深入分析Vue 2的组件通信方式时&#xff0c;我们可以进一步详细地了解以下几种方法&#xff0c;并探讨它们的优缺点以及适用场景&#xff1a; Props & Events&#xff08;父子组件通信&#xff09;: Props: 父组件通过props属性向子组件传递数据。子组件可以通过props选项…

【ARMv8M Cortex-M33 系列 8 -- RT-Thread 移植 posix pthread】

文章目录 RT-Thread POSIX PthreadRT-Thread Pthread 相关宏定义RT-Thread libc 初始化RT-Thread Pthread 测试 RT-Thread POSIX Pthread pthread是POSIX&#xff08;Portable Operating System Interface&#xff09;标准定义的一套线程相关的API&#xff0c;全称为POSIX Thr…

【Spring连载】使用Spring Data访问 MongoDB(一)----快速指南

【Spring连载】使用Spring Data访问 MongoDB&#xff08;一&#xff09;----快速指南 一、版本要求 一、版本要求 Spring Data MongoDB 4.x二进制文件需要JDK级别17及以上版本和Spring Framework 6.1.4及以上版本。 在数据库和驱动程序方面&#xff0c;你需要至少4.x版本的Mon…

jenkins离线安装一波

内网安装jenkins对于没有外网的看过来 插件下载神器-jenkins-plugin-manager 首先下载jenkins&#xff0c;官网地址我就不贴了下载完正常运行&#xff0c;开始界面不要选择任何插件安装&#xff0c;选择无去下载一个插件下载工具https://github.com/jenkinsci/plugin-installa…

《Solidity 简易速速上手小册》第1章:Solidity 和智能合约简介(2024 最新版)

文章目录 1.1 Solidity 的起源和重要性1.1.1 基础知识解析1.1.2 重点案例&#xff1a;去中心化金融 (DeFi) 平台案例 Demo&#xff1a;简易借贷平台 1.1.3 拓展案例 1&#xff1a;NFT 市场案例 Demo&#xff1a;简易 NFT 市场 1.1.4 拓展案例 2&#xff1a;智能合约管理的投票系…

C++ 区间合并 算法(详解) + 例题

1、定义 把所有&#xff0c;有交集的区间合并 图解&#xff1a; 2、实现 步骤如下&#xff1a; 1、首先按照每个区间左端点排序 2、扫描 所有区间&#xff0c;进行区间合并 上述第二条&#xff0c;可以理解为&#xff1a;拿出一个区间去跟它后面的所有的区间去进行合并&…

electron Tab加载动画开启和关闭

记个开发中的bug&#xff0c;以此为鉴。眼懒得时候手勤快点儿&#xff0c;不要想当然&#xff01;&#xff01;&#xff01; 没有转载的价值&#xff0c;请勿转载搬运呦。 WebContents API&#xff1a; Event: did-finish-load​ 导航完成时触发&#xff0c;即选项卡的旋转…

conda 进入python环境里pip install安装不到该环境或不生效

参考&#xff1a;https://blog.csdn.net/weixin_47834823/article/details/128951963 https://blog.51cto.com/u_15060549/4662570?loginfrom_csdn 1、直接进入python Scripts目录下安装 cmd打开运行窗口&#xff0c;cd切换路径至指定虚拟环境下的Scripts路径后再pip安装 擦…