fix(collapse)：折叠面板加载问题处理 #1743 (#1829)

src/packages/__VUE/collapseitem/index.taro.vue

@@ -65,12 +65,10 @@ import {
   computed,
   watch,
   getCurrentInstance,
-  ComponentInternalInstance,
-  VNode
+  ComponentInternalInstance
 } from 'vue';
 import Taro, { eventCenter, getCurrentInstance as getCurrentInstanceTaro } from '@tarojs/taro';
 import { createComponent } from '@/packages/utils/create';
-import { useTaroRect } from '@/packages/utils/useTaroRect';
 const { create, componentName } = createComponent('collapse-item');
 
 export default create({
@@ -167,18 +165,27 @@ export default create({
         // const query = Taro.createSelectorQuery();
         const query = Taro.getEnv() === 'ALIPAY' ? my.createSelectorQuery() : Taro.createSelectorQuery();
         query.selectAll('.collapse-content').boundingClientRect();
-        query.exec((res) => {
-          getH(res[0]);
+        query.exec((res: any[]) => {
+          if (Taro.getEnv() === 'WEB') {
+            getH5();
+          } else {
+            getH(res[0]);
+          }
         });
         if (!proxyData.openExpanded) {
           onTransitionEnd();
         }
       });
     };
-
     const open = () => {
       proxyData.openExpanded = !proxyData.openExpanded;
-      animation();
+      let time = contentRef.value.childNodes?.length || 1;
+      setTimeout(() => {
+        animation();
+      }, 500 * time);
+      // timer.value = setInterval(() => {
+      // animation();
+      // }, 600);
     };
 
     const defaultOpen = () => {
@@ -190,23 +197,6 @@ export default create({
 
     const currentName = computed(() => props.name);
     const toggleOpen = () => {
-      // if (parent.props.accordion) {
-      //   parent.children.forEach((item: any, index: number) => {
-      //     if (currentName.value == item.name) {
-      //       item.changeOpen(!item.openExpanded);
-      //     } else {
-      //       item.changeOpen(false);
-      //       item.animation();
-      //     }
-      //   });
-      //   nextTick(() => {
-      //     parent.changeVal(currentName.value);
-      //     animation();
-      //   });
-      // } else {
-      //   parent.changeValAry(props.name);
-      //   open();
-      // }
       if (parent.props.accordion) {
         nextTick(() => {
           if (currentName.value == parent.props.active) {
@@ -238,23 +228,21 @@ export default create({
       }
     });
 
-    watch(
-      () => ctx?.slots?.default?.(),
-      (vnodes: VNode[]) => {
-        setTimeout(() => {
-          getRefHeight();
-        }, 300);
-      }
-    );
-
+    // watch(
+    //   () => ctx?.slots?.default?.(),
+    //   () => {
+    //     getRefHeight();
+    //   }
+    // );
     const getH = (list: any) => {
       parent.children.forEach((item1: any, index1: number) => {
         let ary: any = Array.from(item1.$el.children);
         let _uid = ary[1].children[0]['uid'];
-        let tm = list.filter((item2: any) => item2.id == _uid);
+        let tm = list?.filter((item2: any) => item2.id == _uid);
         if (tm && tm.length > 0) {
           let h = tm[0]['height'];
           item1.conHeight = h;
+          // resetHeight(h);
         }
       });
     };
@@ -264,14 +252,29 @@ export default create({
         let ary: any = Array.from(item1.$el.children);
         let h = ary[1].children[0]['offsetHeight'];
         item1.conHeight = h;
+        // resetHeight(h);
       });
     };
+    // const prevHeight = ref(0);
+    // const nums = ref(0);
+    // const timer = ref();
+
+    // const resetHeight = (h: number) => {
+    //   // console.log(prevHeight.value, h, nums.value);
+    //   if (prevHeight.value >= h && nums.value > 5) {
+    //     clearInterval(timer.value);
+    //     timer.value = null;
+    //   } else {
+    //     nums.value++;
+    //   }
+    //   prevHeight.value = h;
+    // };
 
     const getRefHeight = () => {
       const query = Taro.getEnv() === 'ALIPAY' ? my.createSelectorQuery() : Taro.createSelectorQuery();
       // const query = Taro.createSelectorQuery();
       query.selectAll('.collapse-content').boundingClientRect();
-      query.exec((res) => {
+      query.exec((res: any[]) => {
         if (Taro.getEnv() === 'WEB') {
           getH5();
         } else {
@@ -279,11 +282,9 @@ export default create({
         }
       });
     };
-
     onMounted(() => {
       const { name } = props;
       const active = parent && parent.props.active;
-
       if (typeof active == 'number' || typeof active == 'string') {
         if (name == active) {
           defaultOpen();
@@ -302,11 +303,6 @@ export default create({
           getRefHeight();
         });
       }
-      // const query = Taro.createSelectorQuery();
-      // query.selectAll('.collapse-content').boundingClientRect();
-      // query.exec((res) => {
-      //   getH(res[0]);
-      // });
     });
 
     return {

src/packages/__VUE/collapseitem/index.vue

@@ -150,6 +150,7 @@ export default create({
       if (!wrapperRefEle || !contentRefEle) {
         return;
       }
+
       const offsetHeight = contentRefEle.offsetHeight || 'auto';
       if (offsetHeight) {
         const contentHeight = `${offsetHeight}px`;
@@ -221,14 +222,18 @@ export default create({
       }
     });
 
-    watch(
-      () => ctx?.slots?.default?.(),
-      () => {
-        setTimeout(() => {
-          animation();
-        }, 300);
-      }
-    );
+    // watch(
+    //   () => ctx?.slots?.default?.(),
+    //   (val) => {
+    //     setTimeout(() => {
+    //       animation();
+    //     }, 300);
+    //   },
+    //   {
+    //     deep: true,
+    //     immediate: true
+    //   }
+    // );
 
     const init = () => {
       const { name } = props;
@@ -247,6 +252,15 @@ export default create({
       });
     };
     onMounted(() => {
+      const MutationObserver: any =
+        window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+      var observer = new MutationObserver(() => {
+        animation();
+      });
+      observer.observe(document.getElementsByClassName('collapse-wrapper')[0], {
+        childList: true,
+        subtree: true
+      });
       init();
       // proxyData.classDirection = parent.props.expandIconPosition;
       // if (parent.props.icon && parent.props.icon != 'none') {