feat(Tabs): add click-tab event (#9037)

src/tab/README.md

@@ -273,7 +273,8 @@ export default {
 
 | Event | Description | Arguments |
 | --- | --- | --- |
-| click | Emitted when a tab is clicked | _name: string \| number, title: string_ |
+| click-tab `v3.1.4` | Emitted when a tab is clicked | _{ name: string \| number, title: string, event: MouseEvent }_ |
+| click | Emitted when a tab is clicked (Deprecated) | _name: string \| number, title: string_ |
 | change | Emitted when active tab changed | _name: string \| number, title: string_ |
 | disabled | Emitted when a disabled tab is clicked | _name: string \| number, title: string_ |
 | rendered | Emitted when content first rendered in lazy-render mode | _name: string \| number, title: string_ |

src/tab/README.zh-CN.md

@@ -280,7 +280,8 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
-| click | 点击标签时触发 | _name: string \| number, title: string_ |
+| click-tab `v3.1.4` | 点击标签时触发 | _{ name: string \| number, title: string, event: MouseEvent }_ |
+| click | 点击标签时触发（已废弃，请使用 click-tab 事件） | _name: string \| number, title: string_ |
 | change | 当前激活的标签改变时触发 | _name: string \| number, title: string_ |
 | disabled | 点击被禁用的标签时触发 | _name: string \| number, title: string_ |
 | rendered | 标签内容首次渲染时触发（仅在开启延迟渲染后触发） | _name: string \| number, title: string_ |

src/tab/test/index.legacy.js

@@ -146,32 +146,6 @@ test('border props', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('click event', async () => {
-  const onClick = jest.fn();
-  const onDisabled = jest.fn();
-
-  const wrapper = mount({
-    template: `
-      <van-tabs @click="onClick" @disabled="onDisabled">
-        <van-tab title="title1">Text</van-tab>
-        <van-tab title="title2" disabled>Text</van-tab>
-      </van-tabs>
-    `,
-    methods: {
-      onClick,
-      onDisabled,
-    },
-  });
-
-  const tabs = wrapper.findAll('.van-tab');
-
-  tabs[0].trigger('click');
-  expect(onClick).toHaveBeenCalledWith(0, 'title1');
-
-  tabs[1].trigger('click');
-  expect(onDisabled).toHaveBeenCalledWith(1, 'title2');
-});
-
 test('name prop', async () => {
   const onClick = jest.fn();
   const onChange = jest.fn();

src/tab/test/index.spec.tsx

@@ -0,0 +1,50 @@
+import { mount, later } from '../../../test';
+import { Tab } from '..';
+import { Tabs } from '../../tabs';
+
+test('should emit click event when tab is clicked', async () => {
+  const onClick = jest.fn();
+
+  const wrapper = mount({
+    render() {
+      return (
+        <Tabs onClick={onClick}>
+          <Tab title="title1">1</Tab>
+          <Tab title="title2">2</Tab>
+        </Tabs>
+      );
+    },
+  });
+
+  await later();
+  const tabs = wrapper.findAll('.van-tab');
+
+  await tabs[0].trigger('click');
+  expect(onClick).toHaveBeenCalledWith(0, 'title1');
+});
+
+test('should emit click-tab event when tab is clicked', async () => {
+  const onClickTab = jest.fn();
+
+  const wrapper = mount({
+    render() {
+      return (
+        <Tabs onClick-tab={onClickTab}>
+          <Tab title="title1">1</Tab>
+          <Tab title="title2">2</Tab>
+        </Tabs>
+      );
+    },
+  });
+
+  await later();
+  const tabs = wrapper.findAll('.van-tab');
+
+  await tabs[0].trigger('click');
+  expect(onClickTab).toHaveBeenCalledWith(
+    expect.objectContaining({
+      name: 0,
+      title: 'title1',
+    })
+  );
+});

src/tabs/Tabs.tsx

@@ -106,7 +106,15 @@ export default defineComponent({
 
   props,
 
-  emits: ['click', 'change', 'scroll', 'disabled', 'rendered', 'update:active'],
+  emits: [
+    'click',
+    'change',
+    'scroll',
+    'disabled',
+    'rendered',
+    'click-tab',
+    'update:active',
+  ],
 
   setup(props, { emit, slots }) {
     let tabHeight: number;
@@ -281,7 +289,11 @@ export default defineComponent({
     };
 
     // emit event when clicked
-    const onClick = (item: ComponentInstance, index: number) => {
+    const onClickTab = (
+      item: ComponentInstance,
+      index: number,
+      event: MouseEvent
+    ) => {
       const { title, disabled } = children[index];
       const name = getTabName(children[index], index);
 
@@ -297,7 +309,16 @@ export default defineComponent({
           },
         });
 
+        emit('click-tab', {
+          name,
+          title,
+          event,
+        });
+
+        // @deprecated
+        // should be removed in next major version
         emit('click', name, title);
+
         route(item as ComponentPublicInstance<RouteProps>);
       }
     };
@@ -353,8 +374,8 @@ export default defineComponent({
           renderTitle={item.$slots.title}
           activeColor={props.titleActiveColor}
           inactiveColor={props.titleInactiveColor}
-          onClick={() => {
+          onClick={(event: MouseEvent) => {
-            onClick(item, index);
+            onClickTab(item, index, event);
           }}
         />
       ));