diff --git a/components/tooltip/__tests__/tooltip-794.spec.ts b/components/tooltip/__tests__/tooltip-794.spec.ts new file mode 100644 index 00000000..6f57a6f0 --- /dev/null +++ b/components/tooltip/__tests__/tooltip-794.spec.ts @@ -0,0 +1,51 @@ +import { describe, expect, it, vi, beforeEach } from 'vitest'; +import { mount } from '@vue/test-utils'; +import FTooltip from '../tooltip'; + +describe('FTooltip showDelay/hideDelay', () => { + beforeEach(() => { + vi.useFakeTimers(); + }); + + it('showDelay delays the tooltip appearance', async () => { + const wrapper = mount(FTooltip, { + props: { modelValue: false, showDelay: 300 }, + slots: { default: '' }, + }); + + const trigger = wrapper.find('button'); + trigger.trigger('mouseenter'); + + vi.advanceTimersByTime(100); + await wrapper.vm.$nextTick(); + expect(wrapper.emitted('update:modelValue')).toBeUndefined(); + + vi.advanceTimersByTime(200); + await wrapper.vm.$nextTick(); + + const emitted = wrapper.emitted('update:modelValue'); + expect(emitted).toBeDefined(); + expect(emitted![0]).toEqual([true]); + }); + + it('hideDelay delays the tooltip disappearance', async () => { + const wrapper = mount(FTooltip, { + props: { modelValue: true, hideDelay: 200 }, + slots: { default: '' }, + }); + + const trigger = wrapper.find('button'); + trigger.trigger('mouseleave'); + + vi.advanceTimersByTime(100); + await wrapper.vm.$nextTick(); + expect(wrapper.emitted('update:modelValue')).toBeUndefined(); + + vi.advanceTimersByTime(200); + await wrapper.vm.$nextTick(); + + const emitted = wrapper.emitted('update:modelValue'); + expect(emitted).toBeDefined(); + expect(emitted![0]).toEqual([false]); + }); +}); \ No newline at end of file diff --git a/components/tooltip/tooltip.tsx b/components/tooltip/tooltip.tsx index 66332dbb..19febdfd 100644 --- a/components/tooltip/tooltip.tsx +++ b/components/tooltip/tooltip.tsx @@ -30,6 +30,12 @@ const defaultConfirmOption = { export const toolTipProps = { ...popperProps, + showDelay: { + type: Number, + }, + hideDelay: { + type: Number, + }, title: [Number, String] as PropType, content: [Number, String] as PropType, mode: { @@ -167,6 +173,8 @@ export default defineComponent({ Object.keys(popperProps).forEach((key) => { _props[key] = props[key as keyof typeof props]; }); + _props.showAfter = props.showDelay ?? 0; + _props.hideAfter = props.hideDelay ?? 0; if (props.mode === 'confirm') { // confirm模式下,只能点击触发 _props.trigger = 'click';