跳转到内容

delay —— 显隐延迟归一

tooltip 要「鼠标移上去立刻显示、移开后稍等片刻再消失」(避免划过时闪烁);popconfirm 要「点了立刻出现」。每个浮层组件都有自己的显隐节奏,但「用户没传时用什么默认值」这件事是公共的。

  • tooltip / popover / popconfirm 等悬停类浮层,props 暴露 show-delay / hide-delay。
  • 任何「用户可覆盖、但有合理默认」的时序参数。

不该用它:固定时序的场景(message 的 3 秒自动关闭)直接写常量,不必走归一。

import { resolveDelay, type LhDefaultDelay } from '@lh-ui/share/core/shared/delay'
export interface LhDefaultDelay {
show: number
hide: number
}
函数 签名 作用
resolveDelay (showDelay: number | undefined, hideDelay: number | undefined, defaults: LhDefaultDelay) => LhDefaultDelay 显隐延迟归一
resolveDelay(undefined, undefined, { show: 0, hide: 150 })
// { show: 0, hide: 150 } —— 用户没传,用组件默认
resolveDelay(200, undefined, { show: 0, hide: 150 })
// { show: 200, hide: 150 } —— 只覆盖了 show

实现就是两个 ??:showDelay ?? defaults.show、hideDelay ?? defaults.hide。null 走同一路径(?? 同时处理 null 和 undefined)。

三个组件的默认值不同,但归一逻辑相同:

组件 默认 show 默认 hide 理由
tooltip 0 150 立刻出现避免「划过无反应」;延迟消失避免划向目标时闪烁
popover 0 150 同上,但内容可交互,hide 更长(由 UI 层定)
popconfirm 0 0 点击触发,无悬停语义

抽出来之后,新增浮层组件只要传自己的 defaults,不用再写一遍「undefined 回落」。

容易混淆的两个东西:

resolveDelay debounce(utils)
语义 「这次显 / 隐之前等多久」的参数归一 把高频调用收敛成一次执行的节流工具
用途 算出延迟值 拿延迟值去包一个真正的定时器

典型链路是串联的:const { hide } = resolveDelay(props.hideDelay, undefined, DEFAULTS) → hideTimer = debounce(actualHide, hide)。

// popover 组件内部
const DEFAULT_DELAY: LhDefaultDelay = { show: 0, hide: 150 }
const delay = computed(() =>
resolveDelay(props.showDelay, props.hideDelay, DEFAULT_DELAY),
)
function onShow() {
setTimeout(open, delay.value.show)
}
function onHide() {
setTimeout(close, delay.value.hide)
}
  • 只做回落,不做钳制:传负数延迟会原样返回。各 UI 层若需要「延迟必须非负」,在 setTimeout(fn, Math.max(0, ms)) 处自行处理(setTimeout 对负数按 0 处理,实际不会出问题)。
  • show / hide 独立:归一后仍是两个独立数字,组件要分别用在两个定时器上。
  • 返回新对象:每次调用返回新的 { show, hide },可以安全地响应式包裹。
@lh-ui/share/core/delay → resolveDelay( )
返回值
(填好参数后点运行)

Copyright © 2024-2026 风默文学 | 宁ICP备2024006574号 | 公安备案徽标苏公网安备32040002010537