blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(Cascader): add options-bottom slot (#9804)

Browse Source
This commit is contained in:
neverland 2021-11-04 20:43:09 +08:00 committed by GitHub
parent df1e6ce916
commit 61ea63199a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/vant/src/cascader/Cascader.tsx
View File

@ -259,10 +259,9 @@ export default defineComponent({
unselected: !selected,
})}
>
{slots['options-top']
? slots['options-top']({ tabIndex: activeTab.value })
: null}
{slots['options-top']?.({ tabIndex })}
{renderOptions(options, selected, tabIndex)}
{slots['options-bottom']?.({ tabIndex })}
</Tab>
);
};

3
packages/vant/src/cascader/README.md
View File

@ -282,7 +282,8 @@ export default {
| --- | --- | --- |
| title | Custom title | - |
| option `v3.1.4` | Custom option text | _{ option: Option, selected: boolean }_ |
| options-top `v3.2.7` | Custom the content above options | _{ tabIndex: number }_ |
| options-top `v3.2.7` | Custom the content above the options | _{ tabIndex: number }_ |
| options-bottom `v3.2.8` | Custom the content below the options | _{ tabIndex: number }_ |
### Types

1
packages/vant/src/cascader/README.zh-CN.md
View File

@ -295,6 +295,7 @@ export default {
| title | 自定义顶部标题 | - |
| option `v3.1.4` | 自定义选项文字 | _{ option: Option, selected: boolean }_ |
| options-top `v3.2.7` | 自定义选项上方的内容 | _{ tabIndex: number }_ |
| options-bottom `v3.2.8` | 自定义选项下方的内容 | _{ tabIndex: number }_ |
### 类型定义

27
packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
View File

@ -1,8 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[` should allow more custom content 1`] = `
exports[`should change close icon when using close-icon prop 1`] = `
<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon van-haptics-feedback">
</i>
`;
exports[`should render option slot correctly 1`] = `
<li class="van-cascader__option">
Custom Option foo
</li>
`;
exports[`should render options-top、options-bottom slots correctly 1`] = `
<div class="van-tab__pane">
tab index: 1
Top, tab index: 0
<ul class="van-cascader__options">
<li class="van-cascader__option van-cascader__option--selected">
<span>
@ -17,20 +28,10 @@ exports[` should allow more custom content 1`] = `
</span>
</li>
</ul>
Bottom, tab index: 0
</div>
`;
exports[`should change close icon when using close-icon prop 1`] = `
<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon van-haptics-feedback">
</i>
`;
exports[`should render option slot correctly 1`] = `
<li class="van-cascader__option">
Custom Option foo
</li>
`;
exports[`should render title slot correctly 1`] = `
<h2 class="van-cascader__title">
Custom Title

5
packages/vant/src/cascader/test/index.spec.ts
View File

@ -242,10 +242,11 @@ test('should allow to custom the color of option', async () => {
expect(option.style.color).toEqual('red');
});
test(' should allow more custom content', async () => {
test('should render options-top、options-bottom slots correctly', async () => {
const wrapper = mount(Cascader, {
slots: {
'options-top': ({ tabIndex }) => `tab index: ${tabIndex}`,
'options-top': ({ tabIndex }) => `Top, tab index: ${tabIndex}`,
'options-bottom': ({ tabIndex }) => `Bottom, tab index: ${tabIndex}`,
},
props: {
options,