网址转base64二维码图片

最新推荐文章于 2024-02-04 16:22:07 发布

鱼空

最新推荐文章于 2024-02-04 16:22:07 发布

阅读量579

点赞数

文章标签： Vue qrcode 二维码生成分享功能前端开发

本文链接：https://blog.csdn.net/m0_69502730/article/details/126630794

版权

思路：

点击分享按钮打开弹框
获取当前url
根据url地址生成二维码图片并插入到弹框

问题：

如何获取url
```
获取完整的url地址
location.href
```
拿到主机 location.host
拿到hash location.hash
拿到?参数 locatoin.search

- 如何根据url生成二维码

1、

安装生成二维码的插件
npm i qrcode
```

生成二维码完整代码如下：

<template>
  <div>
    <h2>详情页</h2>
    <button @click="shareFn">分享</button>

    <!-- 分享弹框 -->
    <van-popup v-model:show="show">
      <img :src="imgURL" alt="二维码" />
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from "vue";
import QRcode from "qrcode";
const show = ref(false);
const imgURL = ref("");

//分享课程
const shareFn = () => {
  //获取当前课程的url
  const url = location.href
  QRcode.toDataURL(url, (err, res) => {
    if (err) return false;
    console.log("二维码：", res);
    imgURL.value = res;
  });

  show.value = true;
};
</script>

<style lang="scss" scoped></style>