Skip to content

Commit 0252bd9

Browse files
authored
feat: ✨ add title slot for wd-collapse-item (#372)
* feat: add title slot for wd-collapse-item component * feat: update doc * feat: ✨ add title slot for wd-collapse-item For this new feature #356Closes: #356 * fix: normalize demo code
1 parent b1a7d25 commit 0252bd9

File tree

5 files changed

+7861
-6308
lines changed

5 files changed

+7861
-6308
lines changed

docs/component/collapse.md

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
## 基本使用
66

7-
`v-model` 为绑定值,可以为 array 类型(普通折叠)、 string 类型(手风琴)和 boolean 类型(收起展开查看更多)。CollapseItem 的 `title` `name` 为必填`name` 用于标识该折叠栏。
7+
`v-model` 为绑定值,可以为 array 类型(普通折叠)、 string 类型(手风琴)和 boolean 类型(收起展开查看更多)。CollapseItem 的 `name` 为必填, `title` 选填且可通过 `slot` 自定义`name` 用于标识该折叠栏。
88

99
```typescript
1010
const value = ref<string[]>(['item1'])
@@ -14,7 +14,13 @@ const value = ref<string[]>(['item1'])
1414
<wd-collapse v-model="value">
1515
<wd-collapse-item title="标签1" name="item1">这是一条简单的示例文字。</wd-collapse-item>
1616
<wd-collapse-item title="标签2" name="item2">这是一条简单的示例文字。</wd-collapse-item>
17-
<wd-collapse-item title="标签3" name="item3">这是一条简单的示例文字。</wd-collapse-item>
17+
<wd-collapse-item name="item3">
18+
<template #title="{ expanded, disabled, isFirst }">
19+
<text style="color: red">通过 slot 自定义标题</text>
20+
<text>{{ expanded ? '我展开了' : '我已收起' }}</text>
21+
</template>
22+
这是一条简单的示例文字。
23+
</wd-collapse-item>
1824
</wd-collapse>
1925
```
2026

@@ -151,7 +157,7 @@ Collapse 查看更多的模式下,可以使用插槽定义自己想要的折
151157
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
152158
| ------------- | ----------------------------------------------------------- | -------- | ------ | ------ | -------- |
153159
| name | 折叠栏的标识符 | string | - | - | - |
154-
| title | 折叠栏的标题 | string | - | - | - |
160+
| title | 折叠栏的标题, 支持同名 slot 自定义内容 | string | - | '' | - |
155161
| disabled | 禁用折叠栏 | boolean | - | false | - |
156162
| before-expend | 打开前的回调函数,返回 false 可以阻止打开,支持返回 Promise | Function | - | false | - |
157163

@@ -187,6 +193,7 @@ Collapse 查看更多的模式下,可以使用插槽定义自己想要的折
187193

188194
| name | 说明 | 最低版本 |
189195
| ---- | ---------------------------------------------------- | -------- |
196+
| title |标题,便于开发者自定义标题(非 viewmore 使用) | $LOWEST_VERSION$ |
190197
| more | 查看更多,便于开发者自定义查看更多类型的展开收起样式 | - |
191198

192199
## CollapseItem 外部样式类

0 commit comments

Comments
 (0)