mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(DropdownItem): add title slot (#4975)
This commit is contained in:
parent
76cdb03962
commit
9d12e895fe
@ -140,6 +140,13 @@ Use `active-color` prop to custom active color of the title and options
|
|||||||
| opened | Triggered when opened menu | - |
|
| opened | Triggered when opened menu | - |
|
||||||
| close | Triggered when close menu | - |
|
| close | Triggered when close menu | - |
|
||||||
|
|
||||||
|
### DropdownItem Slots
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
|------|------|
|
||||||
|
| default | Content |
|
||||||
|
| title | Custom title |
|
||||||
|
|
||||||
### DropdownItem Methods
|
### DropdownItem Methods
|
||||||
|
|
||||||
Use ref to get DropdownItem instance and call instance methods
|
Use ref to get DropdownItem instance and call instance methods
|
||||||
|
@ -144,6 +144,13 @@ export default {
|
|||||||
| opened | 打开菜单栏且动画结束后触发 | - |
|
| opened | 打开菜单栏且动画结束后触发 | - |
|
||||||
| close | 关闭菜单栏时触发 | - |
|
| close | 关闭菜单栏时触发 | - |
|
||||||
|
|
||||||
|
### DropdownItem Slots
|
||||||
|
|
||||||
|
| 名称 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| default | 菜单内容 |
|
||||||
|
| title | 自定义标题,不支持动态渲染 |
|
||||||
|
|
||||||
### DropdownItem 方法
|
### DropdownItem 方法
|
||||||
|
|
||||||
通过 ref 可以获取到 DropdownItem 实例并调用实例方法
|
通过 ref 可以获取到 DropdownItem 实例并调用实例方法
|
||||||
|
@ -95,7 +95,7 @@ export default createComponent({
|
|||||||
]}
|
]}
|
||||||
style={{ color: item.showPopup ? this.activeColor : '' }}
|
style={{ color: item.showPopup ? this.activeColor : '' }}
|
||||||
>
|
>
|
||||||
<div class="van-ellipsis">{item.displayTitle}</div>
|
<div class="van-ellipsis">{item.slots('title') || item.displayTitle}</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
));
|
));
|
||||||
|
@ -303,6 +303,19 @@ exports[`title prop 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`title slot 1`] = `
|
||||||
|
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||||
|
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">
|
||||||
|
Custom Title
|
||||||
|
</div></span></div>
|
||||||
|
<div>
|
||||||
|
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`toggle method 1`] = `
|
exports[`toggle method 1`] = `
|
||||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
|
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
|
||||||
|
@ -241,3 +241,19 @@ test('toggle method', async done => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('title slot', () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
template: `
|
||||||
|
<van-dropdown-menu>
|
||||||
|
<van-dropdown-item>
|
||||||
|
<template #title>
|
||||||
|
Custom Title
|
||||||
|
</template>
|
||||||
|
</van-dropdown-item>
|
||||||
|
</van-dropdown-menu>
|
||||||
|
`
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
@ -221,7 +221,7 @@ export default {
|
|||||||
| 名称 | 说明 |
|
| 名称 | 说明 |
|
||||||
|------|------|
|
|------|------|
|
||||||
| default | 标签页内容 |
|
| default | 标签页内容 |
|
||||||
| title | 自定义标签 |
|
| title | 自定义标题,不支持动态渲染 |
|
||||||
|
|
||||||
### Tabs Events
|
### Tabs Events
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user