feat(card): card组件支持传入loadingProps参数

card组件支持传入loadingProps参数 closed #423
Tencent · Dec 11, 2023 · 0073af6 · 0073af6
1 parent 69f2288
commit 0073af6
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 5 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/card/_example/custom-loading-props.vue b/src/card/_example/custom-loading-props.vue
@@ -0,0 +1,19 @@
+<template>
+  <t-card
+    bordered
+    title="自定义loadingProps"
+    :loading="isLoading"
+    :style="{ width: '400px' }"
+    :loading-props="customProps"
+  >
+    {{ infoMessage }}
+  </t-card>
+</template>
+
+<script setup lang="jsx">
+const customProps = {
+  text: 'TDesign努力加载中...',
+};
+const isLoading = true;
+const infoMessage = `卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。`;
+</script>
diff --git a/src/card/card.en-US.md b/src/card/card.en-US.md
@@ -18,9 +18,10 @@ header | String / Slot / Function | - | Typescript：`string \| TNode`。[see mo
 headerBordered | Boolean | false | \- | N
 hoverShadow | Boolean | false | \- | N
 loading | Boolean / Slot / Function | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+loadingProps | Object | - | Loading Component Props。Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/card/type.ts) | N
 shadow | Boolean | false | \- | N
-size | String | medium | options：medium/small | N
+size | String | medium | options: medium/small | N
 status | String | - | \- | N
 subtitle | String / Slot / Function | - | card subtitle。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-theme | String | normal | options：normal/poster1/poster2 | N
+theme | String | normal | options: normal/poster1/poster2 | N
 title | String / Slot / Function | - | card title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
diff --git a/src/card/card.md b/src/card/card.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Card Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -17,6 +18,7 @@ header | String / Slot / Function | - | 卡片顶部内容，优先级高于其
 headerBordered | Boolean | false | 头部是否带分割线，仅在有header时有效 | N
 hoverShadow | Boolean | false | hover时是否有阴影 | N
 loading | Boolean / Slot / Function | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/card/type.ts) | N
 shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N
 size | String | medium | 尺寸。可选项：medium/small | N
 status | String | - | 卡片状态内容，仅在操作区域不在顶部时有效（即 `theme=poster2` ） | N

diff --git a/src/card/card.tsx b/src/card/card.tsx
@@ -59,6 +59,7 @@ export default defineComponent({
     const showCover = computed(() => props.cover || slots.cover);
     const showLoading = computed(() => props.loading || slots.loading);
     const showContent = computed(() => props.content || slots.content || props.default || slots.default);
+    const loadingProps = computed(() => props.loadingProps || {});
 
     // 是否展示头部区域
     const isHeaderRender = computed(
@@ -118,7 +119,7 @@ export default defineComponent({
       );
 
       if (showLoading.value) {
-        return renderTNodeJSX('loading') || <TLoading>{content}</TLoading>;
+        return renderTNodeJSX('loading') || <TLoading {...loadingProps.value}>{content}</TLoading>;
       }
       return content;
     };

diff --git a/src/card/props.ts b/src/card/props.ts
@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { LoadingProps } from '..';
 import { TdCardProps } from './type';
 import { PropType } from 'vue';
 
@@ -52,7 +53,12 @@ export default {
   /** 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容 */
   loading: {
     type: [Boolean, Function] as PropType<TdCardProps['loading']>,
-    default: false,
+    default: false as TdCardProps['loading'],
+  },
+  /** 透传加载组件(Loading)全部属性 */
+  loadingProps: {
+    type: Object as PropType<TdCardProps['loadingProps']>,
+    default: {} as PropType<TdCardProps['loadingProps']>,
   },
   /** 是否显示卡片阴影，默认不显示 */
   shadow: Boolean,

diff --git a/src/card/type.ts b/src/card/type.ts
@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { LoadingProps } from '../loading';
 import { TNode } from '../common';
 
 export interface TdCardProps {
@@ -59,6 +60,10 @@ export interface TdCardProps {
    * @default false
    */
   loading?: boolean | TNode;
+  /**
+   * 透传加载组件(Loading)全部属性
+   */
+  loadingProps?: LoadingProps;
   /**
    * 是否显示卡片阴影，默认不显示
    * @default false
+4 −0		docs/web/api/card.en-US.md
+5 −0		docs/web/api/card.md
+1 −0		style/mobile/components/side-bar/v2/_index.less