feat(Card): 优化显示结构 (#1832) (#1833)

DevCloudFE · Apr 18, 2024 · 78fa38c · 78fa38c
1 parent d28f856
commit 78fa38c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/packages/devui-vue/devui/card/src/card.tsx b/packages/devui-vue/devui/card/src/card.tsx
@@ -19,16 +19,18 @@ export default defineComponent({
  return () => (
  <div class={['card-container', ns.b(), ns.em('shadow', props.shadow)]}>
  {slots.default?.()}
- <div class={ns.e('header')}>
- {slots.avatar?.() ? <div class={ns.e('avatar')}>{slots.avatar?.()}</div> : ''}
- <div>
- <div class={ns.e('title')}>{slots.title?.()}</div>
- <div class={ns.e('subtitle')}>{slots.subtitle?.()}</div>
+ {(slots.avatar || slots.title || slots.subtitle) && (
+ <div class={ns.e('header')}>
+ {slots.avatar?.() ? <div class={ns.e('avatar')}>{slots.avatar?.()}</div> : ''}
+ <div>
+ <div class={ns.e('title')}>{slots.title?.()}</div>
+ <div class={ns.e('subtitle')}>{slots.subtitle?.()}</div>
+ </div>
  </div>
- </div>
+ )}
  {src.value !== '' ? <img src={src.value} alt="" class={ns.e('meta')} /> : ''}
- <div class={ns.e('content')}>{slots.content?.()}</div>
- <div class={alignClass.value}>{slots.actions ? slots.actions?.() : ''}</div>
+ {slots.content && <div class={ns.e('content')}>{slots.content?.()}</div>}
+ {slots.actions && <div class={alignClass.value}>{slots.actions ? slots.actions?.() : ''}</div>}
  </div>
  );
  },

diff --git a/packages/devui-vue/docs/components/card/index.md b/packages/devui-vue/docs/components/card/index.md
@@ -254,6 +254,7 @@
 | title | 卡片的主要内容描述，一般定义为卡片名称 |
 | subtitle | 对标题的补充，可包含标签等信息 |
 | actions | 决策作用，可以包含操作文本或者操作图标 |
+|default|自定义卡片内所有内容|
 
 ### Card 类型定义
 

diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-devui",
- "version": "1.6.12",
+ "version": "1.6.13",
  "license": "MIT",
  "description": "DevUI components based on Vite and Vue3",
  "keywords": [