From 9978becb3b12c1f2a719379b82543ce732d6cc70 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Fri, 26 May 2023 10:58:09 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E6=98=BE=E7=A4=BA=20overlay=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=BF=9B=E5=85=A5=E4=B8=8D=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/t-overlay.vue     | 43 +++++++++++++--------------
 src/components/overlay/to-confirm.vue |  7 +++--
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/main/t-overlay.vue b/src/components/main/t-overlay.vue
index 95c28e63..8cfb3d14 100644
--- a/src/components/main/t-overlay.vue
+++ b/src/components/main/t-overlay.vue
@@ -1,6 +1,6 @@
 <template>
   <transition enter-from-class="tolo-enter-from" name="tolo">
-    <div v-show="showTolo" class="tolo-box" @click.self.prevent="toClick">
+    <div v-if="showTolo" class="tolo-box" @click.self.prevent="toClick">
       <transition enter-from-class="toli-enter-from" name="toli">
         <slot v-if="showToli" />
       </transition>
@@ -9,38 +9,37 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { ref, watch } from "vue";
+import { onUpdated, ref, provide, watch, toRefs } from "vue";
 
 interface TolProps {
   modelValue: boolean;
   toClick?: () => void;
+  blurVal: string;
+  hide?: true;
 }
 
-const showTolo = ref(false);
-const showToli = ref(false);
+const showTolo = ref(!props.hide);
+const showToli = ref(!props.hide);
 
 const props = withDefaults(defineProps<TolProps>(), {
   modelValue: false,
+  blurVal: "20px",
 });
 
-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);
-    }
-  },
+watch(() => props.modelValue, () => {
+  if (props.modelValue) {
+    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,
@@ -93,7 +92,7 @@ watch(
   justify-content: center;
   align-items: center;
   background: rgb(0 0 0 / 50%);
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(v-bind(blurVal));
   z-index: 100;
 }
 </style>
diff --git a/src/components/overlay/to-confirm.vue b/src/components/overlay/to-confirm.vue
index 77d01782..6a4219e0 100644
--- a/src/components/overlay/to-confirm.vue
+++ b/src/components/overlay/to-confirm.vue
@@ -1,5 +1,5 @@
 <template>
-  <TOverlay v-model="visible" :to-click="onCancel">
+  <TOverlay v-model="visible" :to-click="onCancel" :blur-val="'3px'" hide>
     <div class="confirm-div">
       <div class="confirm-box">
         <div class="confirm-title">
@@ -32,9 +32,11 @@
 
 <script lang="ts" setup>
 // vue
-import { computed } from "vue";
+import { computed, inject } from "vue";
 import TOverlay from "../main/t-overlay.vue";
 
+const test = inject("hide");
+
 interface TOConfirmProps {
   title: string;
   subtitle?: string;
@@ -55,6 +57,7 @@ interface TOConfirmEmits {
 
 const emits = defineEmits<TOConfirmEmits>();
 const props = withDefaults(defineProps<TOConfirmProps>(), {
+  modelValue: false,
   title: "确认",
   subtitle: "",
   isInput: false,