From c781567a68215b448dcad18a2928b4798ba12537 Mon Sep 17 00:00:00 2001
From: morning-star <26325820+Sight-wcg@users.noreply.github.com>
Date: Mon, 14 Oct 2024 23:41:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(dropdown):=20=E6=94=AF=E6=8C=81=E8=87=AA?=
=?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=87=AA=E5=8A=A8=E5=85=B3=E9=97=AD=E5=8A=9F?=
=?UTF-8?q?=E8=83=BD=20(#2274)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat(dropdown): 增强 dropdown 功能
1. 新增 closeOnClick 选项
2. 新增 onClickOutside 回调
3. 修复自定义 content 的上下文菜单异常关闭问题
* Update docs/dropdown/detail/options.md
Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
* Update docs/dropdown/detail/options.md
Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
* Update src/modules/dropdown.js
Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
---------
Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
---
docs/dropdown/detail/options.md | 28 +++++++++++++++++++++++++
src/modules/dropdown.js | 36 +++++++++++++++++++++------------
2 files changed, 51 insertions(+), 13 deletions(-)
diff --git a/docs/dropdown/detail/options.md b/docs/dropdown/detail/options.md
index 27ac59f1..c8363ca4 100644
--- a/docs/dropdown/detail/options.md
+++ b/docs/dropdown/detail/options.md
@@ -60,6 +60,20 @@
`click`
+
+
+
+| closeOnClick 2.9.18+ |
+
+
+下拉面板打开后，再次点击目标元素时是否关闭该面板。
+
+ |
+boolean |
+
+
+`false`
+
|
@@ -317,6 +331,20 @@ close: function(elem){
}
```
+
+
+
+| onClickOutside 2.9.18+ |
+
+
+点击 dropdown 外部时的回调函数，返回 `false` 可阻止关闭。
+
+```
+onClickOutside: function(event){
+ - event: 当前点击的 `event` 对象
+}
+```
+
|
diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js
index 411e78d9..b059ab00 100644
--- a/src/modules/dropdown.js
+++ b/src/modules/dropdown.js
@@ -107,7 +107,8 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
data: [], // 菜单数据结构
delay: [200, 300], // 延时显示或隐藏的毫秒数，若为 number 类型，则表示显示和隐藏的延迟时间相同，trigger 为 hover 时才生效
shade: 0, // 遮罩
- accordion: false // 手风琴效果，仅菜单组生效。基础菜单需要在容器上追加 'lay-accordion' 属性。
+ accordion: false, // 手风琴效果，仅菜单组生效。基础菜单需要在容器上追加 'lay-accordion' 属性。
+ closeOnClick: false // 面板打开后，再次点击目标元素时是否关闭面板。行为取决于所使用的触发事件类型
};
// 重载实例
@@ -443,11 +444,17 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
that.e = e;
// 若为鼠标移入事件，则延迟触发
- isMouseEnter ? (
+ if(isMouseEnter){
thisModule.timer = setTimeout(function(){
that.render();
}, that.normalizedDelay().show)
- ) : that.render();
+ }else{
+ if(options.closeOnClick && options.elem.data(MOD_INDEX +'_opened') && options.trigger === 'click'){
+ that.remove();
+ }else{
+ that.render();
+ }
+ }
e.preventDefault();
};
@@ -538,21 +545,24 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
if(!that) return;
var options = that.config;
+ var isTopElem = lay.isTopElem(options.elem[0]);
+ var isCtxMenu = options.trigger === 'contextmenu';
// 若触发的是绑定的元素，或者属于绑定元素的子元素，则不关闭
- // 满足条件：当前绑定的元素不是 body document，或者不是鼠标右键事件
- if(!(lay.isTopElem(options.elem[0]) || options.trigger === 'contextmenu')){
- if(
- e.target === options.elem[0] ||
- options.elem.find(e.target)[0] ||
- (that.elemView && e.target === that.elemView[0]) ||
- (that.elemView && that.elemView.find(e.target)[0])
- ) return;
- }
-
+ // 满足条件：当前绑定的元素是 body document，或者是鼠标右键事件时，忽略绑定元素
+ var isTriggerTarget = !(isTopElem || isCtxMenu) && (options.elem[0] === e.target || options.elem.find(e.target)[0]);
+ var isPanelTarget = that.elemView && (e.target === that.elemView[0] || that.elemView.find(e.target)[0]);
+ if(isTriggerTarget || isPanelTarget) return;
+ // 处理移动端点击穿透问题
if(e.type === 'touchstart' && options.elem.data(MOD_INDEX +'_opened')){
$(e.target).hasClass(STR_ELEM_SHADE) && e.preventDefault();
}
+
+ // 点击 dropdown 外部时的回调
+ if(typeof options.onClickOutside === 'function'){
+ var shouldClose = options.onClickOutside(e);
+ if(shouldClose === false) return;
+ }
that.remove();
}, {passive: false});