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

  1. 下载arale-qrcode依赖:
html 复制代码
npm i arale-qrcode --save
  1. 引用依赖:
html 复制代码
import AraleQRCode from "arale-qrcode";
  1. 代码部分:
html 复制代码
<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 = true
      this.makeCode()
    },
  },
};
</script>
<style lang="scss" scoped></style>

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

相关推荐
断竿散人4 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
进阶的鱼6 分钟前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试
月亮慢慢圆6 分钟前
拖拽API
前端
知了一笑6 分钟前
独立做产品,做一个,还是做多个找爆款?
前端·后端·产品
uhakadotcom7 分钟前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试
_AaronWong7 分钟前
Electron 桌面应用侧边悬浮窗口设计与实现
前端·electron
玲小珑10 分钟前
LangChain.js 完全开发手册(九)LangGraph 状态图与工作流编排
前端·langchain·ai编程
鹏多多11 分钟前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
JarvanMo11 分钟前
用 `alice` 来检查 Flutter 中的 HTTP 调用
前端
小图图19 分钟前
Claude Code 黑箱揭秘
前端·后端