diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx index 57249578e..d1d420b0a 100644 --- a/src/cascader/Cascader.tsx +++ b/src/cascader/Cascader.tsx @@ -6,6 +6,9 @@ import { Tab } from '../tab'; import { Tabs } from '../tabs'; import { Icon } from '../icon'; +// Types +import type { TabsClickTabEventParams } from '../tabs/Tabs'; + const [name, bem, t] = createNamespace('cascader'); export type CascaderOption = { @@ -187,9 +190,8 @@ export default defineComponent({ const onClose = () => emit('close'); - const onClickTab = (tabIndex: number, title: string) => { - emit('click-tab', tabIndex, title); - }; + const onClickTab = ({ name, title }: TabsClickTabEventParams) => + emit('click-tab', name, title); const renderHeader = () => (
@@ -279,7 +281,7 @@ export default defineComponent({ color={props.activeColor} swipeThreshold={0} swipeable={props.swipeable} - onClick={onClickTab} + onClickTab={onClickTab} > {state.tabs.map(renderTab)} diff --git a/src/composables/use-tab-status.ts b/src/composables/use-tab-status.ts index 8a9b37bea..4f66f8794 100644 --- a/src/composables/use-tab-status.ts +++ b/src/composables/use-tab-status.ts @@ -3,6 +3,4 @@ import { inject, ComputedRef, InjectionKey } from 'vue'; // eslint-disable-next-line export const TAB_STATUS_KEY: InjectionKey> = Symbol(); -export function useTabStatus() { - return inject(TAB_STATUS_KEY, null); -} +export const useTabStatus = () => inject(TAB_STATUS_KEY, null); diff --git a/src/tab/test/index.spec.tsx b/src/tab/test/index.spec.tsx index 5eb797f19..8e41e95e3 100644 --- a/src/tab/test/index.spec.tsx +++ b/src/tab/test/index.spec.tsx @@ -2,27 +2,6 @@ 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(); diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx index c948cbcfa..5417fc47a 100644 --- a/src/tabs/Tabs.tsx +++ b/src/tabs/Tabs.tsx @@ -11,6 +11,7 @@ import { CSSProperties, defineComponent, ExtractPropTypes, + getCurrentInstance, ComponentPublicInstance, } from 'vue'; @@ -54,6 +55,13 @@ const [name, bem] = createNamespace('tabs'); export type TabsType = 'line' | 'card'; +export type TabsClickTabEventParams = { + name: string | number; + title: string; + event: MouseEvent; + disabled: boolean; +}; + const props = { color: String, border: Boolean, @@ -117,6 +125,20 @@ export default defineComponent({ ], setup(props, { emit, slots }) { + if (process.env.NODE_ENV !== 'production') { + const props = getCurrentInstance()?.vnode?.props; + if (props && 'onClick' in props) { + console.warn( + '[Vant] Tabs: "click" event is deprecated, using "click-tab" instead.' + ); + } + if (props && 'onDisabled' in props) { + console.warn( + '[Vant] Tabs: "disabled" event is deprecated, using "click-tab" instead.' + ); + } + } + let tabHeight: number; let lockScroll: boolean; let stickyFixed: boolean; diff --git a/src/vue-tsx-shim.d.ts b/src/vue-tsx-shim.d.ts index 6d38bd7fd..b188cbda3 100644 --- a/src/vue-tsx-shim.d.ts +++ b/src/vue-tsx-shim.d.ts @@ -32,6 +32,7 @@ declare module 'vue' { onPreview?: EventHandler; onKeypress?: EventHandler; onTouchend?: EventHandler; + onClickTab?: EventHandler; onClickStep?: EventHandler; onTouchmove?: EventHandler; onTouchstart?: EventHandler;