cattom/PersonalPage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 在 SocialLinks 组件中使用 Teleport 包裹 WechatModal，优化模态框的渲染位置，同时调整 WechatModal 组件样式，增加相对定位和边距

Browse Source
This commit is contained in:
Cat Tom 2025-03-26 11:56:29 +08:00
parent ecd02793d4
commit 0022b86dda
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/SocialLinks.vue
View File

@ -3,6 +3,7 @@ import { ref, computed } from "vue";
import { useMouseInElement } from "@vueuse/core"; import { useMouseInElement } from "@vueuse/core";
import { useTheme } from "vuetify"; import { useTheme } from "vuetify";
import WechatModal from "./WechatModal.vue"; import WechatModal from "./WechatModal.vue";
import { Teleport } from "vue";
const theme = useTheme(); const theme = useTheme();
const cardRef = ref(null); const cardRef = ref(null);
@ -107,6 +108,7 @@ const openLink = (url) => {
<template> <template>
<div ref="cardRef" class="social-links-card" :style="cardTransform"> <div ref="cardRef" class="social-links-card" :style="cardTransform">
<!-- 使用WechatModal组件 --> <!-- 使用WechatModal组件 -->
<Teleport to="body">
<WechatModal <WechatModal
v-model="showWechatModal" v-model="showWechatModal"
:qr-code="currentQrCode" :qr-code="currentQrCode"
@ -114,6 +116,7 @@ const openLink = (url) => {
hint="打开微信扫一扫，添加我为好友" hint="打开微信扫一扫，添加我为好友"
@closed="currentQrCode = ''" @closed="currentQrCode = ''"
/> />
</Teleport>
<!-- 社交链接主体 --> <!-- 社交链接主体 -->
<div class="social-grid"> <div class="social-grid">
@ -156,7 +159,7 @@ const openLink = (url) => {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1),
inset 0 0 0 1px rgba(255, 255, 255, 0.1); inset 0 0 0 1px rgba(255, 255, 255, 0.1);
will-change: transform; will-change: transform;
overflow: hidden; overflow: visible;
transition: background 0.3s ease, box-shadow 0.3s ease; transition: background 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05);
width: 100%; width: 100%;

5
src/components/WechatModal.vue
View File

@ -210,6 +210,7 @@ onUnmounted(() => {
animation: fadeIn 0.3s ease; animation: fadeIn 0.3s ease;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
isolation: isolate;
} }
.dark-mode.wechat-modal-mask { .dark-mode.wechat-modal-mask {
@ -217,6 +218,7 @@ onUnmounted(() => {
} }
.wechat-modal-container { .wechat-modal-container {
position: relative;
width: 400px; width: 400px;
height: 400px; height: 400px;
aspect-ratio: 1; aspect-ratio: 1;
@ -226,6 +228,7 @@ onUnmounted(() => {
overflow: hidden; overflow: hidden;
transform: scale(0.9); transform: scale(0.9);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
z-index: v-bind('zIndex + 1');
} }
.wechat-modal-header { .wechat-modal-header {
@ -404,6 +407,7 @@ onUnmounted(() => {
.wechat-modal-container { .wechat-modal-container {
width: 95vw; width: 95vw;
height: 95vw; height: 95vw;
margin: 10px;
} }
.qr-code-wrapper { .qr-code-wrapper {
width: 80%; width: 80%;
@ -415,6 +419,7 @@ onUnmounted(() => {
@media (min-width: 361px) { @media (min-width: 361px) {
.wechat-modal-container { .wechat-modal-container {
width: min(420px, 90vw); width: min(420px, 90vw);
margin: 20px;
} }
.qr-code-wrapper { .qr-code-wrapper {
width: 280px; width: 280px;