shop-front-end/src/components/QrCodeHover/index.vue

<template>
  <div class="qr-container  w-[40px] h-[48px] flex-c navbar-bg-hover" @mouseenter="showQr = true"
    @mouseleave="showQr = false">
    <el-icon :size="20">
      <IconifyIconOffline :icon="Iphone" />
    </el-icon>
    <div v-if="showQr" class="qr-popover">
      <ReQrcode text="http://wxshop.ab98.cn/shop-api/api/shop/wechatAuth" :options="{ width: 200 }" />
      <div class="qr-tip">微信扫码访问</div>
      <el-button class="copy-btn" type="primary" size="small" @click="copyLink">
        复制链接
      </el-button>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import ReQrcode from '@/components/ReQrcode'
import Iphone from "@iconify-icons/ep/iphone";
import { copyTextToClipboard } from "@pureadmin/utils";

const showQr = ref(false)

const copyLink = () => {
  const success = copyTextToClipboard('http://wxshop.ab98.cn/shop-api/api/shop/wechatAuth');
  success ? ElMessage.success('链接复制成功') : ElMessage.error('复制失败，请手动复制');
}
</script>

<style lang="scss" scoped>
.qr-container {
  position: relative;

  .qr-popover {
    position: absolute;
    top: 100%;
    right: 0;
    padding: 12px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .qr-tip {
    text-align: center;
    font-size: 12px;
    color: #666;
    margin-top: 8px;
  }
}
</style>