vue3分享网页到qq好友，朋友圈，微博，qq空间

1，前端所需插件

        用来生成微信分享需要的二维码

npm install qrcode --save-dev

2，代码展示

 2.1，Share.vue

<script setup>
import {ref} from "vue"
import WeiXinCode from "./comp/WeiXinCode.vue";
const sysInfo="父组件传过来的文章数据"
const shareUrl =location.href
const isOverlayVisible=ref(false)

/**
 * 分享到QQ
 */
const shareToQQ= function() {
  window.open(
      `https://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&title=${sysInfo}&source=${shareUrl}&desc=${sysInfo}&pics=`)
}

/**
 * 分享到微信：控制鼠标移入移出的页面是否出现
 */
const toggleOverlay=function () {
  isOverlayVisible.value = true
}
const outggleOverlay = () => {
  isOverlayVisible.value = false
}
/**
 * 分享到微博
 */
const shareToMicroblog = function () {
  //跳转地址
  window.open(
      `https://service.weibo.com/share/share.php?url=${ 
      shareUrl
      }&title=${ 
      sysInfo}`
  );
}
/**
 * 分享到qq空间
 */
const shareToQQRom = function () {
  //跳转地址
  window.open(
      `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${ 
      shareUrl
      }&title=${ 
      sysInfo 
      }&summary=${ 
      sysInfo}`
  );
}
</script>

<template>
  <div class="share">
    <a class="weibo" @click="shareToMicroblog()"/>
    <a class="qq" @click="shareToQQ()"/>
    <div class="weixinall">
      <a class="weixin" @mouseover="toggleOverlay()" @mouseleave="outggleOverlay()"/>
      <div class="weixincode">
        <WeiXinCode :is-visible="isOverlayVisible"/>
      </div>
    </div>
    <a class="qqkj" @click="shareToQQRom()"/>
  </div>
</template>

<style lang="scss" scoped>
.share {
  display: flex;
  flex-wrap: nowrap;
  width: 150px;
  justify-content: space-between;
  .weibo {
    display: block;
    /* 设置行内元素为块状元素才能设置宽高 */
    width: 28px;
    height: 28px;
    /* 设置宽高才能显示背景 */
    background-image: url("src/assets/img/weibo.png") !important;
    background-size: cover;
    /* 相对位置是相对于css文件的位置而不是html */
    background-repeat: no-repeat;
    background-position: 50% 50%
  }
  .qq{
    display: block;
    /* 设置行内元素为块状元素才能设置宽高 */
    width: 28px;
    height: 28px;
    /* 设置宽高才能显示背景 */
    background-image: url("src/assets/img/qq.png");
    background-size: cover;
    /* 相对位置是相对于css文件的位置而不是html */
    background-repeat: no-repeat;
    background-position: 50% 50%
  }
  .qqkj {
    display: block;
    /* 设置行内元素为块状元素才能设置宽高 */
    width: 28px;
    height: 28px;
    /* 设置宽高才能显示背景 */
    background-image: url("src/assets/img/qqkj.png");
    background-size: cover;
    /* 相对位置是相对于css文件的位置而不是html */
    background-repeat: no-repeat;
    background-position: 50% 50%
  }

  .weixinall {
    position: relative;
    .weixin {
      display: block;
      /* 设置行内元素为块状元素才能设置宽高 */
      width: 28px;
      height: 28px;
      /* 设置宽高才能显示背景 */
      background-image: url("src/assets/img/weixin.png");
      background-size: cover;
      /* 相对位置是相对于css文件的位置而不是html */
      background-repeat: no-repeat;
      background-position: 50% 50%
    }
    .weixincode {
      position: absolute;
      left: -60px;
      z-index: 1000 !important;
    }
  }
}
</style>

2.2，WeiXinCode.vue

<template>
  <div v-show="isVisible" class="overlay">
    <!-- 这里是覆盖层的内容 -->
    <h2 class="title">扫我分享朋友圈</h2>
    <canvas id="QRCode_header" style="width: 280px; height: 280px"/>
  </div>
</template>

<script setup>
import {onMounted} from "vue";
import QRCode from "qrcode";

defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  }
})

onMounted(() => {
  getQRCode();
})
const getQRCode = function () {
  //生成的二维码为URL地址js
  const  qrUrl = "https://www.baidu.com";
  const opts = {
    errorCorrectionLevel: "H", //容错级别
    type: "image/png", //生成的二维码类型
    quality: 0.3, //二维码质量
    margin: 0, //二维码留白边距
    width: 160, //宽
    height: 160, //高
    text: "二维码内容", //二维码内容
    color: {
      dark: "#000", //前景色
      light: "#fff", //背景色
    },
  };

  const msg = document.querySelector("#QRCode_header");
  // 将获取到的数据（val）画到msg（canvas）上
  QRCode.toCanvas(msg, qrUrl, opts, (error) => {
    if (error) {
      console.log("二维码加载失败", error);
      alert("二维码加载失败");
    }
  });
}
</script>

<style scoped>
.title{
  text-align: center;
}
.overlay {
  background-color: beige;
  width: 100%;
  height: 100%;
  z-index: 1000 !important; /* 确保覆盖层在其他内容之上 */
}
</style>

3，效果展示