From 4136f7af1222eae8d681d9b1923fe40f5cfec569 Mon Sep 17 00:00:00 2001
From: morning-star <26325820+Sight-wcg@users.noreply.github.com>
Date: Tue, 27 Feb 2024 17:59:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(dropdown):=20=E6=96=B0=E5=A2=9E=20close=20?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=20(#1605)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(dropdown): 新增 close 选项

* update code

* update code

* update code

* style(dropdown): 格式化测试代码

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
---
 docs/dropdown/detail/options.md |  14 ++
 examples/dropdown.html          | 423 ++++++++++++++++++--------------
 src/modules/dropdown.js         |  17 +-
 3 files changed, 267 insertions(+), 187 deletions(-)

diff --git a/docs/dropdown/detail/options.md b/docs/dropdown/detail/options.md
index 4f533019..5a88c7b5 100644
--- a/docs/dropdown/detail/options.md
+++ b/docs/dropdown/detail/options.md
@@ -302,6 +302,20 @@ click: function(data, othis){
 
 用法详见：[#示例](#examples)
 
+</td>
+    </tr>
+    <tr>
+<td>close <sup>2.9.7+</sup></td>
+<td colspan="3">
+  
+面板关闭后的回调函数。返回的参数如下：
+
+```
+close: function(elem){
+  console.log(elem); // 当前组件绑定的目标元素对象
+}   
+```
+
 </td>
     </tr>
   </tbody>
diff --git a/examples/dropdown.html b/examples/dropdown.html
index 386db7be..f22ea4d4 100644
--- a/examples/dropdown.html
+++ b/examples/dropdown.html
@@ -37,225 +37,286 @@
 
 <script src="../src/layui.js"></script>
 <script>
-layui.use('dropdown', function(){
+layui.use('dropdown', function () {
   var dropdown = layui.dropdown;
 
   dropdown.render({
-    elem: '#demo1'
-    ,shade: [0.1, '#ddd']
+    elem: '#demo1',
+    shade: [0.1, '#ddd'],
     //,align: 'right'
-    ,data: [{
-      title: 'menu item 1'
-      ,templet: '<i class="layui-icon layui-icon-light"></i> {{= d.title }} <span class="layui-badge-dot"></span>'
-      ,id: ''
-      ,href: ''
-      ,type: '' //菜单类型，支持：normal/group/parent
-    },{
-      title: 'menu item <strong>2</strong>'
-      ,templet: '<img src="https://unpkg.com/outeres@0.1.1/demo/avatar/0.png" style="width: 16px;"> {{- d.title }}'
-      ,id: ''
-      ,href: 'https://www.layui.com/'
-      ,target: '_blank'
-    },{type: '-'},{},{
-      title: 'menu item 3 <hello>'
-      ,id: ''
-      ,type: 'group'
-      ,child: [{
-        title: 'menu item 3-1'
-        ,id: ''
-      },{
-        title: 'menu item 3-2'
-        ,id: ''
-        ,child: [{
-          title: 'menu item 3-2-1'
-          ,id: ''
-        },{
-          title: 'menu item 3-2-2'
-          ,id: ''
-          ,type: 'group'
-          ,child: [{
-            title: 'menu item 3-2-2-1'
-            ,id: ''
-          },{
-            title: 'menu item 3-2-2-2'
-            ,id: ''
-          }]
-        },{
-          title: 'menu item 3-2-3'
-          ,id: ''
-        }]
-      },{
-        title: 'menu item 3-3'
-        ,id: ''
-        ,type: 'group'
-        ,child: [{
-          title: 'menu item 3-3-1'
-          ,id: ''
-        },{
-          title: 'menu item 3-3-2'
-          ,id: ''
-          ,child: [{
-            title: 'menu item 3-3-2-1'
-            ,id: ''
-          },{
-            title: 'menu item 3-3-2-2'
-            ,id: ''
-          },{
-            title: 'menu item 3-3-2-3'
-            ,id: ''
-          }]
-        },{
-          title: 'menu item 3-3-3'
-          ,id: ''
-        }]
-      }]
-    }
-    ,{type: '-'}
-    ,{
-      title: 'menu item 4'
-      ,id: ''
-    },{
-      title: 'menu item 5'
-      ,id: ''
-      ,child: [{
-        title: 'menu item 5-1'
-        ,id: ''
-        ,child: [{
-          title: 'menu item 5-1-1'
-          ,id: ''
-        },{
-          title: 'menu item 5-1-2'
-          ,id: ''
-        },{
-          title: 'menu item 5-1-3'
-          ,id: ''
-        }]
-      },{
-        title: 'menu item 5-2'
-        ,id: ''
-      },{
-        title: 'menu item 5-3'
-        ,id: ''
-      }]
-    },{type:'-'},{
-      title: 'menu item 6'
-      ,id: ''
-      ,type: 'group'
-      ,isSpreadItem: false
-      ,child: [{
-        title: 'menu item 6-1'
-        ,id: ''
-      },{
-        title: 'menu item 6-2'
-        ,id: ''
-      },{
-        title: 'menu item 6-3'
-        ,id: ''
-      }]
-    }]
+    data: [
+      {
+        title: 'menu item 1',
+        templet:
+          '<i class="layui-icon layui-icon-light"></i> {{= d.title }} <span class="layui-badge-dot"></span>',
+        id: '',
+        href: '',
+        type: '' //菜单类型，支持：normal/group/parent
+      },
+      {
+        title: 'menu item <strong>2</strong>',
+        templet:
+          '<img src="https://unpkg.com/outeres@0.1.1/demo/avatar/0.png" style="width: 16px;"> {{- d.title }}',
+        id: '',
+        href: 'https://www.layui.com/',
+        target: '_blank'
+      },
+      { type: '-' },
+      {},
+      {
+        title: 'menu item 3 <hello>',
+        id: '',
+        type: 'group',
+        child: [
+          {
+            title: 'menu item 3-1',
+            id: ''
+          },
+          {
+            title: 'menu item 3-2',
+            id: '',
+            child: [
+              {
+                title: 'menu item 3-2-1',
+                id: ''
+              },
+              {
+                title: 'menu item 3-2-2',
+                id: '',
+                type: 'group',
+                child: [
+                  {
+                    title: 'menu item 3-2-2-1',
+                    id: ''
+                  },
+                  {
+                    title: 'menu item 3-2-2-2',
+                    id: ''
+                  }
+                ]
+              },
+              {
+                title: 'menu item 3-2-3',
+                id: ''
+              }
+            ]
+          },
+          {
+            title: 'menu item 3-3',
+            id: '',
+            type: 'group',
+            child: [
+              {
+                title: 'menu item 3-3-1',
+                id: ''
+              },
+              {
+                title: 'menu item 3-3-2',
+                id: '',
+                child: [
+                  {
+                    title: 'menu item 3-3-2-1',
+                    id: ''
+                  },
+                  {
+                    title: 'menu item 3-3-2-2',
+                    id: ''
+                  },
+                  {
+                    title: 'menu item 3-3-2-3',
+                    id: ''
+                  }
+                ]
+              },
+              {
+                title: 'menu item 3-3-3',
+                id: ''
+              }
+            ]
+          }
+        ]
+      },
+      { type: '-' },
+      {
+        title: 'menu item 4',
+        id: ''
+      },
+      {
+        title: 'menu item 5',
+        id: '',
+        child: [
+          {
+            title: 'menu item 5-1',
+            id: '',
+            child: [
+              {
+                title: 'menu item 5-1-1',
+                id: ''
+              },
+              {
+                title: 'menu item 5-1-2',
+                id: ''
+              },
+              {
+                title: 'menu item 5-1-3',
+                id: ''
+              }
+            ]
+          },
+          {
+            title: 'menu item 5-2',
+            id: ''
+          },
+          {
+            title: 'menu item 5-3',
+            id: ''
+          }
+        ]
+      },
+      { type: '-' },
+      {
+        title: 'menu item 6',
+        id: '',
+        type: 'group',
+        isSpreadItem: false,
+        child: [
+          {
+            title: 'menu item 6-1',
+            id: ''
+          },
+          {
+            title: 'menu item 6-2',
+            id: ''
+          },
+          {
+            title: 'menu item 6-3',
+            id: ''
+          }
+        ]
+      }
+    ],
 
-    ,id: 'demo1'
+    id: 'demo1',
 
-     // 触发点击事件的元素范围 --- default: 仅子菜单触发点击事件（默认，可不填）; all: 所有父子菜单均触发点击事件
-    ,clickScope: 'all'
+    // 触发点击事件的元素范围 --- default: 仅子菜单触发点击事件（默认，可不填）; all: 所有父子菜单均触发点击事件
+    clickScope: 'all',
 
     // 菜单被点击的事件
-    ,click: function(obj){
+    click: function (obj) {
       console.log(obj);
     }
   });
 
   var inst = dropdown.render({
-    elem: '#demo2'
+    elem: '#demo2',
     // ,show: true
-    ,data: [{
-      title: 'menu item 1'
-      ,href: '#1'
-      ,disabled: true
-    },{
-      title: 'menu item 2(点击不关闭)'
-      ,href: '#2'
-      ,id: 'bbb'
-    },{
-      title: 'menu item 3'
-      ,href: '#3'
-    }]
-    ,click: function(data, othis){
+    data: [
+      {
+        title: 'menu item 1',
+        href: '#1',
+        disabled: true
+      },
+      {
+        title: 'menu item 2(点击不关闭)',
+        href: '#2',
+        id: 'bbb'
+      },
+      {
+        title: 'menu item 3',
+        href: '#3'
+      }
+    ],
+    click: function (data, othis) {
       console.log(data);
-      if(data.id === 'bbb'){
+      if (data.id === 'bbb') {
         return false;
       }
-    }
-    ,ready: function(){
+    },
+    ready: function () {
       console.log(arguments);
+    },
+    close: function () {
+      console.log('demo2', this.elem);
     }
   });
 
-
   dropdown.render({
-    elem: '#demo3'
-    ,content: '自定义内容  123 '
-    ,style: 'background:#666;color:#fff;padding:15px;'
-    ,align: 'center'
-    ,trigger: 'hover'
+    elem: '#demo3',
+    content: '自定义内容  123 ',
+    style: 'background:#666;color:#fff;padding:15px;',
+    align: 'center',
+    trigger: 'hover',
+    close: function () {
+      console.log('demo3', this.elem);
+    }
   });
 
-
   //右键
   dropdown.render({
-    elem: document//'#demo20' //也可绑定到 document，从而重置整个右键
-    ,trigger: 'contextmenu' //contextmenu
-    ,isAllowSpread: false
+    elem: document, //'#demo20' //也可绑定到 document，从而重置整个右键
+    trigger: 'contextmenu', //contextmenu
+    isAllowSpread: false,
     //,style: 'width: 200px'
-    ,customName: {
+    customName: {
       children: 'children'
-    }
-    ,data: [{
-      title: 'menu item 1'
-      ,id: '#1'
-    },{
-      title: 'menu item 2'
-      ,id: 'reload'
-    },{type:'-'},{
-      title: 'menu item 3'
-      ,id: '#3'
-      ,children: [{
-        title: 'menu item 3-1'
-        ,id: '#1'
-      },{
-        title: 'menu item 3-2'
-        ,id: '#2'
-      },{
-        title: 'menu item 3-3'
-        ,id: '#3'
-      }]
-    },{type:'-'},{
-      title: 'menu item 4'
-      ,id: ''
-    },{
-      title: 'menu item 5'
-      ,id: '#1'
-    },{
-      title: 'menu item 6'
-      ,id: '#1'
-    }]
-    ,click: function(obj, othis){
-      if(obj.id === 'reload'){
+    },
+    data: [
+      {
+        title: 'menu item 1',
+        id: '#1'
+      },
+      {
+        title: 'menu item 2',
+        id: 'reload'
+      },
+      { type: '-' },
+      {
+        title: 'menu item 3',
+        id: '#3',
+        children: [
+          {
+            title: 'menu item 3-1',
+            id: '#1'
+          },
+          {
+            title: 'menu item 3-2',
+            id: '#2'
+          },
+          {
+            title: 'menu item 3-3',
+            id: '#3'
+          }
+        ]
+      },
+      { type: '-' },
+      {
+        title: 'menu item 4',
+        id: ''
+      },
+      {
+        title: 'menu item 5',
+        id: '#1'
+      },
+      {
+        title: 'menu item 6',
+        id: '#1'
+      }
+    ],
+    click: function (obj, othis) {
+      if (obj.id === 'reload') {
         location.reload();
       }
     }
   });
 
-
-
-
   return;
 
   dropdown.render({
-    elem: document
-    ,content: '123'
+    elem: document,
+    content: '123'
   });
 });
+
 </script>
 </body>
 </html>
diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js
index 7510b663..c92506fd 100644
--- a/src/modules/dropdown.js
+++ b/src/modules/dropdown.js
@@ -377,14 +377,19 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
   Class.prototype.remove = function(){
     var that = this;
     var options = that.config;
-    var elemPrev = thisModule.prevElem;
+    var prevContentElem = thisModule.prevElem;
     
     // 若存在已打开的面板元素，则移除
-    if(elemPrev){
-      elemPrev.data('prevElem') && (
-        elemPrev.data('prevElem').data(MOD_INDEX +'_opened', false)
-      );
-      elemPrev.remove();
+    if(prevContentElem){
+      var prevId = prevContentElem.attr('lay-id');
+      var prevTriggerElem = prevContentElem.data('prevElem');
+      var prevInstance = thisModule.getThis(prevId);
+      var prevOnClose = prevInstance.config.close;
+      
+      prevTriggerElem && prevTriggerElem.data(MOD_INDEX +'_opened', false);
+      prevContentElem.remove();
+      delete thisModule.prevElem;
+      typeof prevOnClose === 'function' && prevOnClose.call(prevInstance.config, prevTriggerElem);
     }
     lay('.' + STR_ELEM_SHADE).remove();
   };