fix(collapse): 数据动态加载时更新问题修复 (#937)

* fix: countup优化滚动逻辑

* fix: collapse 无法动态更新问题修复

* fix: 解决H5侧动态加载问题

src/packages/__VUE/collapse/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo full">
     <h2>基本用法</h2>
-    <nut-collapse v-model:active="active1" icon="down-arrow">
+    <nut-collapse v-model:active="active1" icon="down-arrow" @change="change">
       <nut-collapse-item :name="1">
         <template v-slot:mTitle>
           {{ title1 }}
@@ -11,38 +11,26 @@
       <nut-collapse-item :title="title2" :name="2">
         在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
       </nut-collapse-item>
-      <nut-collapse-item :title="title3" :name="3" disabled>
-      </nut-collapse-item>
+      <nut-collapse-item :title="title3" :name="3" disabled> </nut-collapse-item>
     </nut-collapse>
     <h2>无icon样式</h2>
     <nut-collapse v-model:active="active4" :accordion="true">
       <nut-collapse-item :title="title1" :name="1">
         引入Vue3新特性 Composition API、Teleport、Emits 等
       </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2">
-        全面使用 TypeScipt
-      </nut-collapse-item>
+      <nut-collapse-item :title="title2" :name="2"> 全面使用 TypeScipt </nut-collapse-item>
     </nut-collapse>
     <h2>手风琴</h2>
     <nut-collapse v-model:active="active2" :accordion="true" icon="down-arrow">
-      <nut-collapse-item :title="title1" :name="1">
-        基于京东设计语言体系，构建场景
-      </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
-        提高界⾯的模块化通用程度
-      </nut-collapse-item>
+      <nut-collapse-item :title="title1" :name="1"> 基于京东设计语言体系，构建场景 </nut-collapse-item>
+      <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle"> 提高界⾯的模块化通用程度 </nut-collapse-item>
       <nut-collapse-item :title="title3" :name="3">
         采用组合式 API Composition 语法重构，结构清晰，功能模块化
       </nut-collapse-item>
     </nut-collapse>
     <h2>自定义折叠图标</h2>
 
-    <nut-collapse
-      v-model:active="active3"
-      :accordion="true"
-      icon="arrow-right2"
-      rotate="90"
-    >
+    <nut-collapse v-model:active="active3" :accordion="true" icon="arrow-right2" rotate="90">
       <nut-collapse-item :title="title1" :name="1">
         <template v-slot:sTitle> 文本测试 </template>
         NUTUI3.0重新思考其内在的一致性和可组合性
@@ -61,9 +49,7 @@
       icon="down-arrow"
       :accordion="true"
     >
-      <nut-collapse-item :title="title1" :name="1">
-        组件 emits 事件单独提取，增强代码可读性
-      </nut-collapse-item>
+      <nut-collapse-item :title="title1" :name="1"> 组件 emits 事件单独提取，增强代码可读性 </nut-collapse-item>
       <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
         使用 Teleport 新特性重构挂载类组件
       </nut-collapse-item>
@@ -71,7 +57,7 @@
   </div>
 </template>
 <script lang="ts">
-import { reactive, toRefs } from 'vue';
+import { onMounted, reactive, ref, toRefs } from 'vue';
 import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('collapse');
 export default createDemo({

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

@@ -51,7 +51,7 @@
     <view
       :class="['collapse-wrapper', openExpanded ? 'open-style' : 'close-style']"
       ref="wrapperRef"
-      :style="{ height: openExpanded ? conHeight + 'px' : 0 }"
+      :style="{ height: openExpanded ? (conHeight == 'auto' ? 'auto' : conHeight + 'px') : 0 }"
     >
       <view class="collapse-content" ref="contentRef">
         <slot></slot>
@@ -65,14 +65,13 @@ import {
   inject,
   toRefs,
   onMounted,
-  Ref,
   ref,
-  unref,
   nextTick,
   computed,
   watch,
   getCurrentInstance,
-  ComponentInternalInstance
+  ComponentInternalInstance,
+  VNode
 } from 'vue';
 import Taro, { eventCenter, getCurrentInstance as getCurrentInstanceTaro } from '@tarojs/taro';
 import { createComponent } from '../../utils/create';
@@ -102,9 +101,9 @@ export default create({
       type: Object
     }
   },
-  setup(props) {
+  setup(props, ctx: any) {
     const collapse: any = inject('collapseParent');
-    const conHeight: any = ref(0);
+    const conHeight: any = ref('auto');
     const parent: any = reactive(collapse);
     const classes = computed(() => {
       const prefixCls = componentName;
@@ -170,7 +169,8 @@ export default create({
         proxyData.iconStyle['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
       }
       nextTick(() => {
-        const query = Taro.createSelectorQuery();
+        // const query = Taro.createSelectorQuery();
+        const query = Taro.getEnv() === 'ALIPAY' ? my.createSelectorQuery() : Taro.createSelectorQuery();
         query.selectAll('.collapse-content').boundingClientRect();
         query.exec((res) => {
           getH(res[0]);
@@ -231,6 +231,15 @@ export default create({
       }
     });
 
+    watch(
+      () => ctx?.slots?.default?.(),
+      (vnodes: VNode[]) => {
+        setTimeout(() => {
+          getRefHeight();
+        }, 300);
+      }
+    );
+
     const getH = (list: any) => {
       parent.children.forEach((item1: any, index1: number) => {
         let ary: any = Array.from(item1.$el.children);
@@ -252,7 +261,8 @@ export default create({
     };
 
     const getRefHeight = () => {
-      const query = Taro.createSelectorQuery();
+      const query = Taro.getEnv() === 'ALIPAY' ? my.createSelectorQuery() : Taro.createSelectorQuery();
+      // const query = Taro.createSelectorQuery();
       query.selectAll('.collapse-content').boundingClientRect();
       query.exec((res) => {
         if (Taro.getEnv() === 'WEB') {
@@ -266,6 +276,17 @@ export default create({
     onMounted(() => {
       const { name } = props;
       const active = parent && parent.props.active;
+
+      if (typeof active == 'number' || typeof active == 'string') {
+        if (name == active) {
+          defaultOpen();
+        }
+      } else if (Object.values(active) instanceof Array) {
+        const f = Object.values(active).filter((item) => item == name);
+        if (f.length > 0) {
+          defaultOpen();
+        }
+      }
       // 获取 DOM 元素
       if (Taro.getEnv() === 'WEB') {
         getRefHeight();
@@ -274,24 +295,11 @@ export default create({
           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();
-        }
-      } else if (Object.values(active) instanceof Array) {
-        const f = Object.values(active).filter((item) => item == name);
-        if (f.length > 0) {
-          defaultOpen();
-        }
-      }
     });
 
     return {

src/packages/__VUE/collapseitem/index.vue

@@ -80,7 +80,7 @@ export default create({
       type: Object
     }
   },
-  setup(props) {
+  setup(props, ctx: any) {
     const collapse: any = inject('collapseParent');
     const parent: any = reactive(collapse);
     const classes = computed(() => {
@@ -140,7 +140,7 @@ export default create({
       if (!wrapperRefEle || !contentRefEle) {
         return;
       }
-      const offsetHeight = contentRefEle.offsetHeight;
+      const offsetHeight = contentRefEle.offsetHeight || 'auto';
       if (offsetHeight) {
         const contentHeight = `${offsetHeight}px`;
         wrapperRefEle.style.willChange = 'height';
@@ -206,6 +206,15 @@ export default create({
       }
     });
 
+    watch(
+      () => ctx?.slots?.default?.(),
+      () => {
+        setTimeout(() => {
+          animation();
+        }, 300);
+      }
+    );
+
     onMounted(() => {
       const { name } = props;
       const active = parent && parent.props.active;

src/sites/mobile-taro/vue/project.config.json

@@ -31,12 +31,15 @@
       "outputPath": ""
     },
     "enableEngineNative": false,
-    "useIsolateContext": true,
+    "useIsolateContext": false,
     "userConfirmedBundleSwitch": false,
     "packNpmManually": false,
     "packNpmRelationList": [],
     "minifyWXSS": true,
-    "showES6CompileOption": false
+    "disableUseStrict": false,
+    "minifyWXML": true,
+    "showES6CompileOption": false,
+    "useCompilerPlugins": false
   },
   "compileType": "miniprogram",
   "simulatorType": "wechat",

src/sites/mobile-taro/vue/src/feedback/pages/collapse/index.vue

@@ -1,24 +1,17 @@
 <template>
   <div class="demo full">
     <h2>基本用法</h2>
-    <nut-collapse v-model:active="active1" icon="down-arrow">
+    <nut-collapse v-model:active="active1" icon="down-arrow" @change="change">
       <nut-collapse-item :title="title1" :name="1">
         京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
       </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2">
-        京东到家：教师节期间 创意花束销量增长53倍
-      </nut-collapse-item>
-      <nut-collapse-item :title="title3" :name="3" disabled>
-      </nut-collapse-item>
+      <nut-collapse-item :title="title2" :name="2"> 京东到家：教师节期间 创意花束销量增长53倍 </nut-collapse-item>
+      <nut-collapse-item :title="title3" :name="3" disabled> </nut-collapse-item>
     </nut-collapse>
     <h2>无icon样式</h2>
     <nut-collapse v-model:active="active4" :accordion="true">
-      <nut-collapse-item :title="title1" :name="1">
-        2020年中国数字游戏市场规模超2786亿元
-      </nut-collapse-item>
-      <nut-collapse-item :title="title2" :name="2">
-        基于区块链技术的取证APP在浙江省杭州市发布
-      </nut-collapse-item>
+      <nut-collapse-item :title="title1" :name="1"> 2020年中国数字游戏市场规模超2786亿元 </nut-collapse-item>
+      <nut-collapse-item :title="title2" :name="2"> 基于区块链技术的取证APP在浙江省杭州市发布 </nut-collapse-item>
     </nut-collapse>
     <h2>手风琴</h2>
     <nut-collapse v-model:active="active2" :accordion="true" icon="down-arrow">
@@ -29,20 +22,11 @@
       <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
         中国服务机器人市场已占全球市场超1/4
       </nut-collapse-item>
-      <nut-collapse-item :title="title3" :name="3">
-        QuestMobile：90后互联网用户规模超越80后达3.62亿
-      </nut-collapse-item>
+      <nut-collapse-item :title="title3" :name="3"> QuestMobile：90后互联网用户规模超越80后达3.62亿 </nut-collapse-item>
     </nut-collapse>
     <h2>自定义折叠图标</h2>
-    <nut-collapse
-      v-model:active="active3"
-      :accordion="true"
-      icon="arrow-right2"
-      rotate="90"
-    >
-      <nut-collapse-item :title="title1" :name="1">
-        京东数科IPO将引入“绿鞋机制”
-      </nut-collapse-item>
+    <nut-collapse v-model:active="active3" :accordion="true" icon="arrow-right2" rotate="90">
+      <nut-collapse-item :title="title1" :name="1"> 京东数科IPO将引入“绿鞋机制” </nut-collapse-item>
       <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
         世界制造业大会开幕，阿里巴巴与安徽合作再升级
       </nut-collapse-item>
@@ -57,9 +41,7 @@
       icon="down-arrow"
       :accordion="true"
     >
-      <nut-collapse-item :title="title1" :name="1">
-        “森亿智能”获4亿元D轮融资
-      </nut-collapse-item>
+      <nut-collapse-item :title="title1" :name="1"> “森亿智能”获4亿元D轮融资 </nut-collapse-item>
       <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
         快看漫画与全球潮玩集合店X11达成战略合作
       </nut-collapse-item>
@@ -67,7 +49,7 @@
   </div>
 </template>
 <script lang="ts">
-import { reactive, toRefs } from 'vue';
+import { onMounted, reactive, ref, toRefs } from 'vue';
 export default {
   setup(props, context) {
     const data = reactive({
@@ -84,6 +66,12 @@ export default {
     const change = (name: string) => {
       console.log(`点击了name是${name}的面板`);
     };
+    // const content = ref("");
+    // onMounted(() => {
+    //   setTimeout(() => {
+    //     content.value = "京东到家：教师节期间 创意花束销量增长53倍";
+    //   }, 500);
+    // })
     return {
       change,
       ...toRefs(data)