feat: 优化collapse组件

components/miaoCollapse.vue

@@ -15,9 +15,7 @@ const props = defineProps({
 })
 const cwRef = ref<HTMLDivElement>()
 const cRef = ref<HTMLDivElement>()
-const cwStyle = ref<{ [key: string]: string | number }>({
+const cwStyle = ref<{ [key: string]: string | number }>({})
-    maxHeight: '99999vh',
-})
 const cStyle = ref<{ [key: string]: string | number }>({})
 
 let originHeight = -1
@@ -33,6 +31,13 @@ const clearTimer = () => {
 
 const handleHide = () => {
     clearTimer()
+    calcOriginHeight();
+    cwStyle.value = {
+        maxHeight: `${originHeight}px`,
+        opacity: 1,
+        transition: "all 0.2s ease-in-out, opacity 0.1s ease-out",
+    }
+    timer.push(setTimeout(() => {
         cwStyle.value = {
             maxHeight: 0,
             opacity: 0,
@@ -44,8 +49,10 @@ const handleHide = () => {
                 maxHeight: 0,
                 display: 'none',
                 opacity: 0,
+                pointerEvents: 'none',
             }
         }, 300))
+    }))
 }
 
 const handleShow = () => {
@@ -53,6 +60,15 @@ const handleShow = () => {
     cwStyle.value = {
         maxHeight: 0,
         opacity: 0,
+        pointerEvents: 'none',
+    }
+    timer.push(setTimeout(() => {
+        calcOriginHeight();
+        cwStyle.value = {
+            maxHeight: 0,
+            opacity: 0,
+            transition: "all 0.2s ease-in-out, opacity 0.3s ease-in",
+            pointerEvents: 'none',
         }
         timer.push(setTimeout(() => {
             cwStyle.value = {
@@ -60,6 +76,15 @@ const handleShow = () => {
                 opacity: 1,
                 transition: "all 0.2s ease-in-out, opacity 0.3s ease-in"
             }
+            timer.push(setTimeout(() => {
+                cwStyle.value = {
+                    opacity: 1,
+                }
+                nextTick(() => {
+                    calcOriginHeight()
+                })
+            }, 300))
+        }))
     }))
 }
 
@@ -73,11 +98,12 @@ watch(() => props.show, (newVal) => {
     }
 })
 
+const calcOriginHeight = () => {
+    originHeight = cRef.value!.clientHeight
+}
+
 onMounted(() => {
-    originHeight = cwRef.value!.clientHeight
+    calcOriginHeight()
-    cwStyle.value = {
-        maxHeight: `${originHeight}px`,
-    }
 })
 </script>