feat(Cascader): click-tab event (#8606)

* feat(Cascader): click-tab event

* chore(Cascader): adjust onClickTab use

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 = () => (
       <div class={bem('header')}>
         <h2 class={bem('title')}>
@@ -247,6 +251,7 @@ export default defineComponent({
         color={props.activeColor}
         swipeThreshold={0}
         swipeable={props.swipeable}
+        onClick={onClickTab}
       >
         {state.tabs.map(renderTab)}
       </Tabs>

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
 

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
 

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,
+  ]);
+});