diff --git a/src/tab/README.md b/src/tab/README.md
index 505b04b53..3f95cfc7a 100644
--- a/src/tab/README.md
+++ b/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_ |
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index 3b10e3c4a..55236afc7 100644
--- a/src/tab/README.zh-CN.md
+++ b/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_ |
diff --git a/src/tab/test/index.legacy.js b/src/tab/test/index.legacy.js
index d9bd61eef..a9a995fff 100644
--- a/src/tab/test/index.legacy.js
+++ b/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: `
-
- Text
- Text
-
- `,
- 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();
diff --git a/src/tab/test/index.spec.tsx b/src/tab/test/index.spec.tsx
new file mode 100644
index 000000000..8324fc681
--- /dev/null
+++ b/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 (
+
+ 1
+ 2
+
+ );
+ },
+ });
+
+ 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 (
+
+ 1
+ 2
+
+ );
+ },
+ });
+
+ await later();
+ const tabs = wrapper.findAll('.van-tab');
+
+ await tabs[0].trigger('click');
+ expect(onClickTab).toHaveBeenCalledWith(
+ expect.objectContaining({
+ name: 0,
+ title: 'title1',
+ })
+ );
+});
diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx
index 05e6f5637..75cd8da7a 100644
--- a/src/tabs/Tabs.tsx
+++ b/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);
}
};
@@ -353,8 +374,8 @@ export default defineComponent({
renderTitle={item.$slots.title}
activeColor={props.titleActiveColor}
inactiveColor={props.titleInactiveColor}
- onClick={() => {
- onClick(item, index);
+ onClick={(event: MouseEvent) => {
+ onClickTab(item, index, event);
}}
/>
));