feat(Loading): enrich the supported types of indicator properties

Tencent · Jul 4, 2023 · 653470d · 653470d
1 parent 035bef6
commit 653470d
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 55 deletions.
diff --git a/src/loading/loading.en-US.md b/src/loading/loading.en-US.md
@@ -9,12 +9,11 @@ content | String / Slot / Function | - | Typescript：`string \| TNode`。[see m
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 delay | Number | 0 | \- | N
 duration | Number | 800 | \- | N
-indicator | Boolean | true | \- | N
+indicator | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 inheritColor | Boolean | false | \- | N
 layout | String | horizontal | options：horizontal/vertical | N
 loading | Boolean | true | \- | N
 pause | Boolean | false | \- | N
-progress | Number | - | \- | N
 reverse | Boolean | - | \- | N
 size | String | '20px' | \- | N
 text | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N

diff --git a/src/loading/loading.md b/src/loading/loading.md
@@ -9,12 +9,11 @@ content | String / Slot / Function | - | 子元素。TS 类型：`string \| TNod
 default | String / Slot / Function | - | 子元素，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
 duration | Number | 800 | 加载动画执行完成一次的时间，单位：毫秒 | N
-indicator | Boolean | true | 是否显示加载指示符 | N
+indicator | Boolean / Slot / Function | true | 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 inheritColor | Boolean | false | 是否继承父元素颜色 | N
 layout | String | horizontal | 对齐方式。可选项：horizontal/vertical | N
 loading | Boolean | true | 是否处于加载状态 | N
 pause | Boolean | false | 是否暂停动画 | N
-progress | Number | - | 加载进度 | N
 reverse | Boolean | - | 加载动画是否反向 | N
 size | String | '20px' | 尺寸，示例：20px | N
 text | String / Slot / Function | - | 加载提示文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N

diff --git a/src/loading/loading.vue b/src/loading/loading.vue
@@ -1,23 +1,6 @@
 <template>
   <div :class="rootClass" :style="rootStyle">
-    <template v-if="indicator && realLoading">
-      <gradient-icon v-if="theme === 'circular'" :style="animationStyle" />
-      <spinner-icon v-else-if="theme === 'spinner'" :style="animationStyle" />
-      <div v-else-if="theme === 'dots'" :class="`${name}__dots`" :style="animationStyle">
-        <div
-          :class="`${name}__dot`"
-          :style="duration ? `animation-duration: ${duration / 1000}s; animation-delay: 0s` : ''"
-        ></div>
-        <div
-          :class="`${name}__dot`"
-          :style="duration ? `animation-duration: ${duration / 1000}s; animation-delay: ${(duration * 1) / 3000}s` : ''"
-        ></div>
-        <div
-          :class="`${name}__dot`"
-          :style="duration ? `animation-duration: ${duration / 1000}s; animation-delay: ${(duration * 2) / 3000}s` : ''"
-        ></div>
-      </div>
-    </template>
+    <t-node v-if="indicator && realLoading && indicatorContent" :content="indicatorContent" />
     <span v-if="textContent && realLoading" :class="textClass">
       <t-node :content="textContent" />
     </span>
@@ -26,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, getCurrentInstance, computed, ref, watch, toRefs } from 'vue';
+import { defineComponent, getCurrentInstance, computed, ref, watch, toRefs, h } from 'vue';
 import GradientIcon from './icon/gradient.vue';
 import SpinnerIcon from './icon/spinner.vue';
 import { renderTNode, TNode, renderContent } from '../shared';
@@ -40,8 +23,6 @@ const name = `${prefix}-loading`;
 export default defineComponent({
   name,
   components: {
-    GradientIcon,
-    SpinnerIcon,
     TNode,
   },
   props: LoadingProps,
@@ -98,23 +79,51 @@ export default defineComponent({
       return style.join(';');
     });
 
-    const animationStyle = computed(() => {
-      const ans: Record<string, any> = {};
-      if (props.pause) {
-        ans['animation-play-state'] = 'paused';
-      }
-      if (props.reverse) {
-        ans['animation-direction'] = 'reverse';
-      }
-      if (props.duration) {
-        ans['animation-duration'] = `${props.duration}ms`;
-      }
-      if (props.size) {
-        ans.width = props.size;
-        ans.height = props.size;
-      }
-      return ans;
-    });
+    const defaultIndicator = {
+      circular: GradientIcon,
+      spinner: SpinnerIcon,
+    };
+
+    const indicatorContent = computed(() =>
+      renderTNode(internalInstance, 'indicator', {
+        defaultNode:
+          props.theme === 'dots'
+            ? h(
+                'div',
+                {
+                  class: `${name}__dots`,
+                  style: {
+                    animationPlayState: props.pause ? 'paused' : '',
+                    animationDirection: props.reverse ? 'reverse' : '',
+                    animationDuration: `${props.duration}ms`,
+                    width: props.size,
+                    height: props.size,
+                  },
+                },
+                [
+                  Array.from({ length: 3 }).map((val, i) => {
+                    return h('div', {
+                      class: `${name}__dot`,
+                      style: props.duration
+                        ? `animation-duration: ${props.duration / 1000}s; animation-delay: ${
+                            (props.duration * i) / 3000
+                          }s`
+                        : '',
+                    });
+                  }),
+                ],
+              )
+            : h(defaultIndicator[props.theme || 'circular'], {
+                style: {
+                  animationPlayState: props.pause ? 'paused' : '',
+                  animationDirection: props.reverse ? 'reverse' : '',
+                  animationDuration: `${props.duration}ms`,
+                  width: props.size,
+                  height: props.size,
+                },
+              }),
+      }),
+    );
 
     return {
       name,
@@ -123,8 +132,8 @@ export default defineComponent({
       textClass,
       textContent,
       defaultContent,
+      indicatorContent,
       rootStyle,
-      animationStyle,
       realLoading,
     };
   },

diff --git a/src/loading/props.ts b/src/loading/props.ts
@@ -26,9 +26,9 @@ export default {
     type: Number,
     default: 800,
   },
-  /** 是否显示加载指示符 */
+  /** 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符 */
   indicator: {
-    type: Boolean,
+    type: [Boolean, Function] as PropType<TdLoadingProps['indicator']>,
     default: true,
   },
   /** 是否继承父元素颜色 */
@@ -49,10 +49,6 @@ export default {
   },
   /** 是否暂停动画 */
   pause: Boolean,
-  /** 加载进度 */
-  progress: {
-    type: Number,
-  },
   /** 加载动画是否反向 */
   reverse: Boolean,
   /** 尺寸，示例：20px */

diff --git a/src/loading/type.ts b/src/loading/type.ts
@@ -26,10 +26,10 @@ export interface TdLoadingProps {
    */
   duration?: number;
   /**
-   * 是否显示加载指示符
+   * 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
    * @default true
    */
-  indicator?: boolean;
+  indicator?: boolean | TNode;
   /**
    * 是否继承父元素颜色
    * @default false
@@ -50,10 +50,6 @@ export interface TdLoadingProps {
    * @default false
    */
   pause?: boolean;
-  /**
-   * 加载进度
-   */
-  progress?: number;
   /**
    * 加载动画是否反向
    */