diff --git a/docs/dropdown/detail/options.md b/docs/dropdown/detail/options.md index 6aa5b415..c66f4106 100644 --- a/docs/dropdown/detail/options.md +++ b/docs/dropdown/detail/options.md @@ -142,11 +142,13 @@ 延迟关闭的毫秒数。当 `trigger: 'hover'` 时才生效 +2.9.2+ 延时显示或隐藏的毫秒数,[showDelay, hideDelay]。若为 number 类型,则表示显示和隐藏的延迟时间相同,例如 300 或者 [200, 300]。当 `trigger: 'hover'` 时才生效 + -number +number/array -`300` +`[200, 300]` diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js index 374959cd..ed0fefcd 100644 --- a/src/modules/dropdown.js +++ b/src/modules/dropdown.js @@ -101,7 +101,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ isAllowSpread: true, // 是否允许菜单组展开收缩 isSpreadItem: true, // 是否初始展开子菜单 data: [], // 菜单数据结构 - delay: 300, // 延迟关闭的毫秒数,若 trigger 为 hover 时才生效 + delay: [200, 300], // 延时显示或隐藏的毫秒数,若为 number 类型,则表示显示和隐藏的延迟时间相同,trigger 为 hover 时才生效 shade: 0, // 遮罩 accordion: false // 手风琴效果,仅菜单组生效。基础菜单需要在容器上追加 'lay-accordion' 属性。 }; @@ -388,6 +388,17 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ } lay('.' + STR_ELEM_SHADE).remove(); }; + + Class.prototype.normalizedDelay = function(){ + var that = this; + var options = that.config; + var delay = [].concat(options.delay); + + return { + show: delay[0], + hide: delay[1] !== undefined ? delay[1] : delay[0] + } + } // 延迟删除视图 Class.prototype.delayRemove = function(){ @@ -397,7 +408,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ thisModule.timer = setTimeout(function(){ that.remove(); - }, options.delay); + }, that.normalizedDelay().hide); }; // 事件 @@ -416,7 +427,10 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ that.prevElemCallback = function(e){ clearTimeout(thisModule.timer); that.e = e; - that.render(); + thisModule.timer = setTimeout(function(){ + that.render(); + }, that.normalizedDelay().show); + e.preventDefault(); }; @@ -425,7 +439,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){ // 如果是鼠标移入事件 if(options.trigger === 'mouseenter'){ - // 直行鼠标移出事件 + // 执行鼠标移出事件 options.elem.on('mouseleave', function(){ that.delayRemove(); });