refactor: refine Collapse logic

wxsms · wxsms · commit 7525bc7a8960 · 2021-11-22T09:27:09.000+08:00
diff --git a/src/components/collapse/Collapse.vue b/src/components/collapse/Collapse.vue
@@ -16,9 +16,11 @@ export default defineComponent({
     let timeoutId = 0;
     const element = ref(null);
 
-    function toggle(show) {
-      clearTimeout(timeoutId);
+    function toggle() {
+      const show = props.modelValue;
       const el = element.value;
+      // console.log('toggle', el, show);
+      clearTimeout(timeoutId);
       if (!el) {
         return;
       }
@@ -57,18 +59,10 @@ export default defineComponent({
       }
     }
 
-    watchEffect(() => {
-      toggle(props.modelValue);
-    });
-
-    onMounted(() => {
-      addClass(element.value, COLLAPSE);
-      if (props.modelValue) {
-        addClass(element.value, IN);
-      }
-    });
+    watchEffect(toggle);
 
-    return () => h(props.tag, { ref: element }, slots.default?.());
+    return () =>
+      h(props.tag, { ref: element, class: COLLAPSE }, slots.default?.());
   },
 });
 </script>
