UI更新

src/components/SModal.vue

@@ -9,32 +9,50 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  noBg: {
+    type: Boolean,
+    default: false,
+  },
 });
+const showContainer = ref(false);
 const showContent = ref(false);
 watch(
   () => props.show,
   (newValue) => {
-    setTimeout(() => {
-      showContent.value = newValue;
-    }, 100);
-  }
+    if (newValue) {
+      showContainer.value = true;
+      setTimeout(() => {
+        showContent.value = true;
+      }, 100);
+    } else {
+      showContent.value = false;
+      setTimeout(() => {
+        showContainer.value = false;
+      }, 100);
+    }
+  },
+  {}
 );
-const closeModal = () => {
-  showContent.value = false;
-  setTimeout(() => {
-    props.onClose();
-  }, 300);
-};
 </script>
 
 <template>
-  <view class="container" v-if="show" :style="{ opacity: show ? 1 : 0 }">
+  <view
+    class="container"
+    v-if="showContainer"
+    :style="{ opacity: show ? 1 : 0 }"
+    @click="onClose"
+  >
     <view
       class="modal-content"
-      :style="{ transform: `translateY(${showContent ? '0%' : '100%'})` }"
+      :style="{ transform: `translateY(${showContent ? '0%' : '100%'})`, height: !noBg ? '260px' : 'auto' }"
+      @click.stop=""
     >
-      <image src="../static/modal-content-bg.png" mode="widthFix" />
-      <view class="close-btn" @click="closeModal">
+      <image
+        v-if="!noBg"
+        src="../static/modal-content-bg.png"
+        mode="widthFix"
+      />
+      <view class="close-btn" @click="onClose">
         <image src="../static/close-yellow.png" mode="widthFix" />
       </view>
       <slot></slot>
@@ -60,7 +78,6 @@ const closeModal = () => {
 }
 .modal-content {
   width: 100%;
-  height: 260px;
   transform: translateY(100%);
   transition: all 0.3s ease;
   position: relative;