diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx index 3157ad0a1..7deb79ff1 100644 --- a/src/cascader/Cascader.tsx +++ b/src/cascader/Cascader.tsx @@ -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 }) { const state = reactive({ @@ -180,6 +180,10 @@ export default defineComponent({ const onClose = () => emit('close'); + const onClickTab = (tabIndex: number, title: string) => { + emit('click-tab', tabIndex, title); + }; + const renderHeader = () => (

@@ -247,6 +251,7 @@ export default defineComponent({ color={props.activeColor} swipeThreshold={0} swipeable={props.swipeable} + onClick={onClickTab} > {state.tabs.map(renderTab)} diff --git a/src/cascader/README.md b/src/cascader/README.md index 1cc75cbac..55892b8dc 100644 --- a/src/cascader/README.md +++ b/src/cascader/README.md @@ -220,6 +220,7 @@ export default { | change | Emitted when active option changed | `{ value, selectedOptions, tabIndex }` | | finish | Emitted when all options is selected | `{ value, selectedOptions, tabIndex }` | | close | Emmitted when the close icon is clicked | - | +| click-tab | Emitted when a tab is clicked | _activeTab: number, title: string_ | ### Slots diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md index 379b1deb9..cef1d5938 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -225,11 +225,12 @@ export default { ### Events -| 事件 | 说明 | 回调参数 | -| ------ | ---------------------- | -------------------------------------- | -| change | 选中项变化时触发 | `{ value, selectedOptions, tabIndex }` | -| finish | 全部选项选择完成后触发 | `{ value, selectedOptions, tabIndex }` | -| close | 点击关闭图标时触发 | - | +| 事件 | 说明 | 回调参数 | +| --------- | ---------------------- | -------------------------------------- | +| change | 选中项变化时触发 | `{ value, selectedOptions, tabIndex }` | +| finish | 全部选项选择完成后触发 | `{ value, selectedOptions, tabIndex }` | +| close | 点击关闭图标时触发 | - | +| click-tab | 点击标签时触发 | _tabIndex: number, title: string_ | ### Slots diff --git a/src/cascader/test/index.spec.ts b/src/cascader/test/index.spec.ts index 9d595135b..976c30331 100644 --- a/src/cascader/test/index.spec.ts +++ b/src/cascader/test/index.spec.ts @@ -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, + ]); +});