blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(TreeSelect): add item param to nav-text slot (#11641)

Browse Source 
* feat(TreeSelect): add item param to nav-text slot

* chore: fix case name
This commit is contained in:
neverland 2023-03-04 15:47:39 +08:00 committed by GitHub
parent 572e2482d9
commit 0547527f5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 61 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/text-ellipsis/README.md
View File

@ -2,7 +2,7 @@
### Intro
Display ellipsis for long text and support for expanding or collapsing text.
Display ellipsis for long text and support for expanding or collapsing text. Please upgrade to >= v4.1.0 before using this component.
### Install

2
packages/vant/src/text-ellipsis/README.zh-CN.md
View File

@ -2,7 +2,7 @@
### 介绍
对长文本进行省略，支持展开/收起。
对长文本进行省略，支持展开/收起。请升级到 >= 4.1.0 版本来使用该组件。
### 引入

8
packages/vant/src/tree-select/README.md
View File

@ -210,10 +210,10 @@ export default {
### Slots
| Name | Description |
| -------- | ------------------------------ |
| nav-text | Custom name of the parent node |
| content | Custom right content |
| Name | Description | SlotProps |
| ----------------- | ------------------------------ | ----------------------- |
| nav-text `v4.1.0` | Custom name of the parent node | _item: TreeSelectChild_ |
| content | Custom right content | - |
### Data Structure of TreeSelectItem

8
packages/vant/src/tree-select/README.zh-CN.md
View File

@ -218,10 +218,10 @@ export default {
### Slots
| 名称 | 说明 |
| -------- | ------------------ |
| nav-text | 自定义导航名称 |
| content | 自定义右侧区域内容 |
| 名称 | 说明 | 参数 |
| ----------------- | ------------------ | ----------------------- |
| nav-text `v4.1.0` | 自定义导航名称 | _item: TreeSelectChild_ |
| content | 自定义右侧区域内容 | - |
### TreeSelectItem 数据结构

6
packages/vant/src/tree-select/TreeSelect.tsx
View File

@ -114,12 +114,14 @@ export default defineComponent({
const Items = props.items.map((item) => (
<SidebarItem
dot={item.dot}
title={item.text}
badge={item.badge}
class={[bem('nav-item'), item.className]}
disabled={item.disabled}
onClick={onClickSidebarItem}
v-slots={{ title: slots['nav-text']?.() }}
v-slots={{
title: () =>
slots['nav-text'] ? slots['nav-text'](item) : item.text,
}}
/>
));

34
packages/vant/src/tree-select/test/__snapshots__/index.spec.tsx.snap
View File

@ -68,3 +68,37 @@ exports[`should render nav badge correctly 1`] = `
</div>
</div>
`;
exports[`should render nav-text slot correctly 1`] = `
<div class="van-tree-select"
style="height: 300px;"
>
<div role="tablist"
class="van-sidebar van-tree-select__nav"
>
<div role="tab"
class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item"
tabindex="0"
aria-selected="true"
>
<div class="van-badge__wrapper van-sidebar-item__text">
Custom nav text, group1
</div>
</div>
<div role="tab"
class="van-sidebar-item van-tree-select__nav-item"
tabindex="0"
aria-selected="false"
>
<div class="van-badge__wrapper van-sidebar-item__text">
Custom nav text, group2
</div>
</div>
</div>
<div class="van-tree-select__content">
<div class="van-ellipsis van-tree-select__item">
city1
</div>
</div>
</div>
`;

13
packages/vant/src/tree-select/test/index.spec.tsx
View File

@ -247,3 +247,16 @@ test('should change selected icon when using selected-icon prop', () => {
expect(wrapper.find('.van-tree-select__item').html()).toMatchSnapshot();
});
test('should render nav-text slot correctly', async () => {
const wrapper = mount(TreeSelect, {
props: {
items: mockItems,
},
slots: {
'nav-text': (item) => `Custom nav text, ${item.text}`,
},
});
expect(wrapper.html()).toMatchSnapshot();
});