mirror of https://github.com/layui/layui
增强 dropdown delay 选项,支持设置 `显示/隐藏` 的延迟时间
close https://gitee.com/layui/layui/issues/I8NZ8Xpull/1454/head
parent
597078fa7b
commit
48ab9a136d
|
@ -142,11 +142,13 @@
|
||||||
|
|
||||||
延迟关闭的毫秒数。当 `trigger: 'hover'` 时才生效
|
延迟关闭的毫秒数。当 `trigger: 'hover'` 时才生效
|
||||||
|
|
||||||
|
<sup>2.9.2+</sup> 延时显示或隐藏的毫秒数,[showDelay, hideDelay]。若为 number 类型,则表示显示和隐藏的延迟时间相同,例如 300 或者 [200, 300]。当 `trigger: 'hover'` 时才生效
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
<td>number</td>
|
<td>number/array</td>
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
`300`
|
`[200, 300]`
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
@ -101,7 +101,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||||
isAllowSpread: true, // 是否允许菜单组展开收缩
|
isAllowSpread: true, // 是否允许菜单组展开收缩
|
||||||
isSpreadItem: true, // 是否初始展开子菜单
|
isSpreadItem: true, // 是否初始展开子菜单
|
||||||
data: [], // 菜单数据结构
|
data: [], // 菜单数据结构
|
||||||
delay: 300, // 延迟关闭的毫秒数,若 trigger 为 hover 时才生效
|
delay: [200, 300], // 延时显示或隐藏的毫秒数,若为 number 类型,则表示显示和隐藏的延迟时间相同,trigger 为 hover 时才生效
|
||||||
shade: 0, // 遮罩
|
shade: 0, // 遮罩
|
||||||
accordion: false // 手风琴效果,仅菜单组生效。基础菜单需要在容器上追加 'lay-accordion' 属性。
|
accordion: false // 手风琴效果,仅菜单组生效。基础菜单需要在容器上追加 'lay-accordion' 属性。
|
||||||
};
|
};
|
||||||
|
@ -389,6 +389,17 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||||
lay('.' + STR_ELEM_SHADE).remove();
|
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(){
|
Class.prototype.delayRemove = function(){
|
||||||
var that = this;
|
var that = this;
|
||||||
|
@ -397,7 +408,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||||
|
|
||||||
thisModule.timer = setTimeout(function(){
|
thisModule.timer = setTimeout(function(){
|
||||||
that.remove();
|
that.remove();
|
||||||
}, options.delay);
|
}, that.normalizedDelay().hide);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 事件
|
// 事件
|
||||||
|
@ -416,7 +427,10 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||||
that.prevElemCallback = function(e){
|
that.prevElemCallback = function(e){
|
||||||
clearTimeout(thisModule.timer);
|
clearTimeout(thisModule.timer);
|
||||||
that.e = e;
|
that.e = e;
|
||||||
|
thisModule.timer = setTimeout(function(){
|
||||||
that.render();
|
that.render();
|
||||||
|
}, that.normalizedDelay().show);
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -425,7 +439,7 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||||
|
|
||||||
// 如果是鼠标移入事件
|
// 如果是鼠标移入事件
|
||||||
if(options.trigger === 'mouseenter'){
|
if(options.trigger === 'mouseenter'){
|
||||||
// 直行鼠标移出事件
|
// 执行鼠标移出事件
|
||||||
options.elem.on('mouseleave', function(){
|
options.elem.on('mouseleave', function(){
|
||||||
that.delayRemove();
|
that.delayRemove();
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue