From a398a5fac366be37d6fdb76970569cc268276cbb Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Thu, 25 May 2023 22:24:16 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=96=B0=E5=BB=BA=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=9C=8B=E7=9C=8B=E8=83=BD?=
 =?UTF-8?q?=E4=B8=8D=E8=83=BD=E6=9B=BF=E4=BB=A3=20v-overlay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/t-overlay.vue | 98 +++++++++++++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 src/components/main/t-overlay.vue

diff --git a/src/components/main/t-overlay.vue b/src/components/main/t-overlay.vue
new file mode 100644
index 00000000..56ffd86f
--- /dev/null
+++ b/src/components/main/t-overlay.vue
@@ -0,0 +1,98 @@
+<template>
+  <transition enter-from-class="tolo-enter-from" name="tolo">
+    <div v-show="showTolo" class="tolo-box">
+      <transition enter-from-class="toli-enter-from" name="toli">
+        <slot v-if="showToli" />
+      </transition>
+    </div>
+  </transition>
+</template>
+<script lang="ts" setup>
+// vue
+import { ref, watch } from "vue";
+
+interface TolProps {
+  modelValue: boolean;
+}
+
+const showTolo = ref(false);
+const showToli = ref(false);
+
+const props = withDefaults(defineProps<TolProps>(), {
+  modelValue: false,
+});
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    console.log(v);
+    if (v) {
+      showTolo.value = true;
+      showToli.value = true;
+    } else {
+      setTimeout(() => {
+        showToli.value = false;
+      }, 100);
+      setTimeout(() => {
+        showTolo.value = false;
+      }, 300);
+    }
+  },
+);
+
+</script>
+<style lang="css" scoped>
+.tolo-enter-active,
+.tolo-leave-active,
+.toli-enter-active {
+  transition: all 0.3s;
+}
+
+.toli-leave-active {
+  transition: all 0.5s ease-in-out;
+}
+
+.tolo-enter-from,
+.toli-enter-from {
+  opacity: 0;
+  transform: scale(1.5);
+}
+
+.tolo-enter-to,
+.toli-enter-to {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.tolo-leave-from {
+  opacity: 1;
+}
+
+.tolo-leave-to {
+  opacity: 0;
+}
+
+.toli-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.toli-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+.tolo-box {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(0 0 0 / 50%);
+  backdrop-filter: blur(20px);
+  z-index: 100;
+}
+</style>