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): click-tab event (#8606)

Browse Source 
* feat(Cascader): click-tab event

* chore(Cascader): adjust onClickTab use
This commit is contained in:
nemo-shen 2021-04-23 17:38:40 +08:00 committed by GitHub
parent f57e1313e9
commit df7114701a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/cascader/Cascader.tsx
View File

@ -48,7 +48,7 @@ export default defineComponent({
}, },
}, },
emits: ['close', 'change', 'finish', 'update:modelValue'], emits: ['close', 'change', 'finish', 'update:modelValue', 'click-tab'],
setup(props, { slots, emit }) { setup(props, { slots, emit }) {
const state = reactive({ const state = reactive({
@ -180,6 +180,10 @@ export default defineComponent({
const onClose = () => emit('close'); const onClose = () => emit('close');
const onClickTab = (tabIndex: number, title: string) => {
emit('click-tab', tabIndex, title);
};
const renderHeader = () => ( const renderHeader = () => (
<div class={bem('header')}> <div class={bem('header')}>
<h2 class={bem('title')}> <h2 class={bem('title')}>
@ -247,6 +251,7 @@ export default defineComponent({
color={props.activeColor} color={props.activeColor}
swipeThreshold={0} swipeThreshold={0}
swipeable={props.swipeable} swipeable={props.swipeable}
onClick={onClickTab}
> >
{state.tabs.map(renderTab)} {state.tabs.map(renderTab)}
</Tabs> </Tabs>

1
src/cascader/README.md
View File

@ -220,6 +220,7 @@ export default {
| change | Emitted when active option changed | `{ value, selectedOptions, tabIndex }` | | change | Emitted when active option changed | `{ value, selectedOptions, tabIndex }` |
| finish | Emitted when all options is selected | `{ value, selectedOptions, tabIndex }` | | finish | Emitted when all options is selected | `{ value, selectedOptions, tabIndex }` |
| close | Emmitted when the close icon is clicked | - | | close | Emmitted when the close icon is clicked | - |
| click-tab | Emitted when a tab is clicked | _activeTab: number, title: string_ |
### Slots ### Slots

11
src/cascader/README.zh-CN.md
View File

@ -225,11 +225,12 @@ export default {
### Events ### Events
| 事件 | 说明 | 回调参数 | | 事件 | 说明 | 回调参数 |
| ------ | ---------------------- | -------------------------------------- | | --------- | ---------------------- | -------------------------------------- |
| change | 选中项变化时触发 | `{ value, selectedOptions, tabIndex }` | | change | 选中项变化时触发 | `{ value, selectedOptions, tabIndex }` |
| finish | 全部选项选择完成后触发 | `{ value, selectedOptions, tabIndex }` | | finish | 全部选项选择完成后触发 | `{ value, selectedOptions, tabIndex }` |
| close | 点击关闭图标时触发 | - | | close | 点击关闭图标时触发 | - |
| click-tab | 点击标签时触发 | _tabIndex: number, title: string_ |
### Slots ### Slots

28
src/cascader/test/index.spec.ts
View File

@ -176,3 +176,31 @@ test('should allow to custom field names', async () => {
}, },
]); ]);
}); });
test('should emit click-tab event when a tab is clicked', async () => {
const wrapper = mount(Cascader, {
props: {
options,
},
});
await later();
wrapper.find('.van-cascader__option').trigger('click');
await later();
wrapper
.findAll('.van-cascader__options')[1]
.find('.van-cascader__option')
.trigger('click');
await later();
const tabs = wrapper.findAll('.van-tab');
tabs[0].trigger('click');
expect(wrapper.emitted('click-tab')![0]).toEqual([0, options[0].text]);
tabs[1].trigger('click');
expect(wrapper.emitted('click-tab')![1]).toEqual([
1,
options[0].children[0].text,
]);
});