fix: child component taro export bug #707

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

@@ -1,11 +1,7 @@
 <template>
   <view :class="classes">
     <view
-      :class="[
-        'collapse-item',
-        { 'item-expanded': openExpanded },
-        { 'nut-collapse-item-disabled': disabled }
-      ]"
+      :class="['collapse-item', { 'item-expanded': openExpanded }, { 'nut-collapse-item-disabled': disabled }]"
       @click="toggleOpen"
     >
       <view class="collapse-title">
@@ -16,10 +12,7 @@
               :name="titleIcon"
               :size="titleIconSize"
               :color="titleIconColor"
-              :class="[
-                'collapse-title-icon',
-                titleIconPosition == 'left' ? 'titleIconLeft' : 'titleIconRight'
-              ]"
+              :class="['collapse-title-icon', titleIconPosition == 'left' ? 'titleIconLeft' : 'titleIconRight']"
             ></nut-icon>
             <template v-if="$slots.mTitle">
               <slot name="mTitle"></slot>
@@ -51,11 +44,7 @@
         :name="icon"
         :size="iconSize"
         :color="iconColor"
-        :class="[
-          'collapse-icon',
-          { 'col-expanded': openExpanded },
-          { 'collapse-icon-disabled': disabled }
-        ]"
+        :class="['collapse-icon', { 'col-expanded': openExpanded }, { 'collapse-icon-disabled': disabled }]"
         :style="iconStyle"
       ></nut-icon>
     </view>
@@ -76,18 +65,18 @@ import {
   inject,
   toRefs,
   onMounted,
+  Ref,
   ref,
+  unref,
   nextTick,
   computed,
   watch,
   getCurrentInstance,
   ComponentInternalInstance
 } from 'vue';
-import Taro, {
-  eventCenter,
-  getCurrentInstance as getCurrentInstanceTaro
-} from '@tarojs/taro';
+import Taro, { eventCenter, getCurrentInstance as getCurrentInstanceTaro } from '@tarojs/taro';
 import { createComponent } from '../../utils/create';
+import { useTaroRect } from '../../utils/useTaroRect';
 const { create, componentName } = createComponent('collapse-item');
 
 export default create({
@@ -140,9 +129,7 @@ export default create({
       // classDirection: 'right',
       iconStyle: {
         transform: 'rotate(0deg)',
-        marginTop: parent.props.iconHeght
-          ? '-' + parent.props.iconHeght / 2 + 'px'
-          : '-10px'
+        marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
       }
     });
 
@@ -180,8 +167,7 @@ export default create({
       if (parent.props.icon && !proxyData.openExpanded) {
         proxyData.iconStyle['transform'] = 'rotate(0deg)';
       } else {
-        proxyData.iconStyle['transform'] =
-          'rotate(' + parent.props.rotate + 'deg)';
+        proxyData.iconStyle['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
       }
       nextTick(() => {
         const query = Taro.createSelectorQuery();
@@ -203,8 +189,7 @@ export default create({
     const defaultOpen = () => {
       open();
       if (parent.props.icon) {
-        proxyData['iconStyle']['transform'] =
-          'rotate(' + parent.props.rotate + 'deg)';
+        proxyData['iconStyle']['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
       }
     };
 
@@ -255,41 +240,48 @@ export default create({
           let h = tm[0]['height'];
           item1.conHeight = h;
         }
-        // ary.forEach((item2: any, index2: number) => {
-        //   let ary2 = Array.from(item2.children);
-        //   ary2.length > 0 &&
-        //     ary2.forEach((item3: any, index3: number) => {
-        //       if (domID.includes(item3.uid)) {
-        //         const h = list.filter((item4: any) => item4.id == item3.uid)[0]
-        //           ?.height;
-        //         item1.conHeight = h;
-        //       }
-        //     });
-        // });
       });
     };
 
-    // let list: any = [],
-    //   domID: any = [];
+    const getH5 = () => {
+      parent.children.forEach((item1: any, index1: number) => {
+        let ary: any = Array.from(item1.$el.children);
+        let h = ary[1].children[0]['offsetHeight'];
+        item1.conHeight = h;
+      });
+    };
+
+    const getRefHeight = () => {
+      const query = Taro.createSelectorQuery();
+      query.selectAll('.collapse-content').boundingClientRect();
+      query.exec((res) => {
+        if (Taro.getEnv() === 'WEB') {
+          getH5();
+        } else {
+          getH(res[0]);
+        }
+      });
+    };
+
     onMounted(() => {
       const { name } = props;
       const active = parent && parent.props.active;
       // 获取 DOM 元素
-      eventCenter.once((getCurrentInstanceTaro() as any).router.onReady, () => {
-        const query = Taro.createSelectorQuery();
-        query.selectAll('.collapse-content').boundingClientRect();
-        query.exec((res) => {
-          // list = res[0];
-          // list.forEach((item: any) => {
-          //   domID.push(item.id);
-          // });
-          getH(res[0]);
-          // parent.activeIndex().forEach((item:any) => {
-          //   const h = list[item]?.height;
-          //   parent.children[item].conHeight = h;
-          // });
+      if (Taro.getEnv() === 'WEB') {
+        getRefHeight();
+      } else {
+        eventCenter.once((getCurrentInstanceTaro() as any).router.onReady, () => {
+          getRefHeight();
         });
-      });
+      }
+
+      // const query = Taro.createSelectorQuery();
+      // query.selectAll('.collapse-content').boundingClientRect();
+      // query.exec((res) => {
+      //   console.log(res[0]);
+      //   getH(res[0]);
+      // });
+
       if (typeof active == 'number' || typeof active == 'string') {
         if (name == active) {
           defaultOpen();

src/packages/__VUE/collapseitem/index.vue

@@ -1,11 +1,7 @@
 <template>
   <view :class="classes">
     <view
-      :class="[
-        'collapse-item',
-        { 'item-expanded': openExpanded },
-        { 'nut-collapse-item-disabled': disabled }
-      ]"
+      :class="['collapse-item', { 'item-expanded': openExpanded }, { 'nut-collapse-item-disabled': disabled }]"
       @click="toggleOpen"
     >
       <view class="collapse-title">
@@ -16,13 +12,11 @@
               :name="titleIcon"
               :size="titleIconSize"
               :color="titleIconColor"
-              :class="[
-                titleIconPosition == 'left' ? 'titleIconLeft' : 'titleIconRight'
-              ]"
+              :class="[titleIconPosition == 'left' ? 'titleIconLeft' : 'titleIconRight']"
             ></nut-icon>
             <slot v-if="$slots.mTitle" name="mTitle"></slot>
             <template v-else>
-              <view v-html="title"></view>
+              <view v-html="title" class="collapse-icon-title"></view>
             </template>
           </view>
         </view>
@@ -36,11 +30,7 @@
         :name="icon"
         :size="iconSize"
         :color="iconColor"
-        :class="[
-          'collapse-icon',
-          { 'col-expanded': openExpanded },
-          { 'collapse-icon-disabled': disabled }
-        ]"
+        :class="['collapse-icon', { 'col-expanded': openExpanded }, { 'collapse-icon-disabled': disabled }]"
         :style="iconStyle"
       ></nut-icon>
     </view>
@@ -115,9 +105,7 @@ export default create({
       // classDirection: 'right',
       iconStyle: {
         transform: 'rotate(0deg)',
-        marginTop: parent.props.iconHeght
-          ? '-' + parent.props.iconHeght / 2 + 'px'
-          : '-10px'
+        marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
       }
     });
 
@@ -138,8 +126,7 @@ export default create({
 
     // 清除 willChange 减少性能浪费
     const onTransitionEnd = () => {
-      const wrapperRefEle: any =
-        document.getElementsByClassName('collapse-wrapper')[0];
+      const wrapperRefEle: any = document.getElementsByClassName('collapse-wrapper')[0];
       wrapperRefEle.style.willChange = 'auto';
 
       // const query = wx.createSelectorQuery();
@@ -157,14 +144,11 @@ export default create({
       if (offsetHeight) {
         const contentHeight = `${offsetHeight}px`;
         wrapperRefEle.style.willChange = 'height';
-        wrapperRefEle.style.height = !proxyData.openExpanded
-          ? 0
-          : contentHeight;
+        wrapperRefEle.style.height = !proxyData.openExpanded ? 0 : contentHeight;
         if (parent.props.icon && !proxyData.openExpanded) {
           proxyData.iconStyle['transform'] = 'rotate(0deg)';
         } else {
-          proxyData.iconStyle['transform'] =
-            'rotate(' + parent.props.rotate + 'deg)';
+          proxyData.iconStyle['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
         }
       }
       if (!proxyData.openExpanded) {
@@ -180,8 +164,7 @@ export default create({
     const defaultOpen = () => {
       open();
       if (parent.props.icon) {
-        proxyData['iconStyle']['transform'] =
-          'rotate(' + parent.props.rotate + 'deg)';
+        proxyData['iconStyle']['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
       }
     };
 

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

@@ -179,9 +179,11 @@ export default create({
     };
 
     onMounted(() => {
-      Taro.nextTick(() => {
-        calculateHeight();
-      });
+      setTimeout(() => {
+        Taro.nextTick(() => {
+          calculateHeight();
+        });
+      }, 300);
     });
 
     return {

vite.config.build.taro.vue.disperse.ts

@@ -14,9 +14,11 @@ let input = {};
 
 configPkg.nav.map((item) => {
   item.packages.forEach((element) => {
-    let { name, show, taro, type, exportEmpty } = element;
+    let { name, show, taro, type, exportEmpty, exportEmptyTaro } = element;
     if (taro && (show || exportEmpty)) {
-      input[name] = `./src/packages/__VUE/${name.toLowerCase()}/index${exportEmpty ? '.vue' : '.taro.vue'}`;
+      input[name] = `./src/packages/__VUE/${name.toLowerCase()}/index${
+        exportEmpty && !exportEmptyTaro ? '.vue' : '.taro.vue'
+      }`;
     }
   });
 });