time 必须设为正整数(毫秒),如 5000 表示 5 秒后自动销毁;设 0 或不写则永不关闭;-1 无效,tips 层不支持该值。

layer.tips 的 time 参数怎么设才生效
直接说结论:time 必须是正整数(单位毫秒),设成 5000 就能停 5 秒后自动关闭;设成 0 或不写,就永不关闭;设成 -1 是无效的——layer.tips 不支持 time: -1 这种“永久保持”逻辑,那是 layer.msg 和 layer.alert 才认的规则。
常见错误现象:复制了 layer.msg 的写法,比如 layer.tips('提示', '#el', { time: -1 }),结果发现没反应、或者直接报错/静默失败。这是因为 tips 层的源码里压根没处理 -1 分支。
-
time: 5000是唯一可靠写法,表示 5 秒后销毁该 tips - 如果元素
#el是动态插入的,确保调用layer.tips时它已存在于 DOM 中,否则 tips 会定位失败或不显示 -
time超时后,tips 会被完全移除(DOM 销毁),不是隐藏,所以不用手动layer.close()
为什么 tipsMore: true 在设了 time 后很重要
默认情况下,同一个目标元素(比如 #el)反复调用 layer.tips,旧的 tips 会被强制销毁,新的顶替上去——即使你刚弹出一个 time: 5000 的,下一秒又触发一次,前一个就没了。这在表单校验、鼠标频繁悬停等场景下,会导致提示“闪一下就消失”,用户根本来不及看。
解决办法就是打开 tipsMore: true:
layer.tips('用户名不能为空', '#username', { time: 5000, tipsMore: true })- 这样每次调用都会新建一个 tips,互不干扰,5 秒倒计时各自独立运行
- 但要注意内存:如果高频触发(如每 200ms 检查一次输入),可能短时间内堆起多个 tips,建议配合防抖(debounce)使用
方向、颜色和遮罩这些参数和 time 能不能共存
能,而且推荐一起配。但顺序和写法容易错——tips 的方向参数叫 tips(没错,同名),不是 direction 或 pos,它接受数字或数组:
-
tips: 2→ 右侧出现 -
tips: [2, '#ff6b6b']→ 右侧 + 红色背景(第二个值是颜色) -
shade: 0.1可以加轻微遮罩,避免用户误点背后内容;但tips层默认无遮罩,shade设了才生效 - 完整示例:
layer.tips('密码需8位以上', '#pwd', { tips: [3, '#2f80ed'], time: 5000, shade: 0.05 })(下方蓝底提示,5 秒后消失,带浅灰遮罩)
移动端适配和自动关闭的冲突点
在 iOS Safari 或部分安卓 WebView 里,time 倒计时可能不准,尤其页面切到后台再切回来,计时器会被系统暂停或大幅延迟——导致本该 5 秒关的,卡住十几秒甚至不关。
这不是 bug,是浏览器节电策略。稳妥做法是:在需要强提示的场景(比如必填项未填),别只依赖 time,加个手动关闭入口:
- 用
layer.open自定义一个 type: 4 的 tips 层(它支持更多配置),里面放个「×」按钮 - 或改用
layer.msg+time: 5000+closeBtn: 1,它更稳定,且原生支持点击关闭 - 真要用
tips,就别设太长的time,5 秒已是上限;超过就该换交互形式(比如 inline 提示)
最常被忽略的一点:layer.tips 的 time 是“从显示完成开始计时”,不是“从调用函数开始”。如果页面卡顿、渲染慢,实际关闭时间会比预期晚几百毫秒——别把它当精确定时器用。











