feat(dropdown): 新增 dropdown.open 方法 (#1693)

* feat(dropdown): 新增 dropdown.open 方法

* docs: 添加 dropdown.open 示例

docs/dropdown/index.md

@@ -24,6 +24,7 @@ toc: true
 | [dropdown.reload(id, options)](#reload) | 完整重载 |
 | [dropdown.reloadData(id, options)](#reload) <sup>2.8+</sup> | 仅重载数据或内容 |
 | [dropdown.close(id)](#close) | 关闭对应的组件面板 |
+| [dropdown.open(id)](#open) <sup>2.9.8+</sup> | 打开对应的组件面板 |
 
 <h3 id="render" lay-toc="{level: 2}">渲染</h3>
 
@@ -154,4 +155,26 @@ dropdown.render({
 });
 // 关闭对应的组件面板
 dropdown.close('test');
+```
+
+
+<h3 id="open" lay-pid="api" class="ws-anchor ws-bold">打开面板 <sup>2.9.8+</sup></h3>
+
+`dropdown.open(id);`
+
+- 参数 `id` : 组件渲染时定义的 `id` 属性值
+
+该方法用于打开对应的 `dropdown` 组件面板。
+
+```
+var dropdown = layui.dropdown;
+
+// 渲染
+dropdown.render({
+  elem: '', // 绑定元素选择器
+  id: 'test', // 自定义 id 
+  // 其他属性 …
+});
+// 打开对应的组件面板
+dropdown.open('test');
 ```

examples/dropdown.html

@@ -29,6 +29,12 @@
     <a href="javascript:;" id="demo3">文字下拉 <i class="layui-icon layui-icon-down"></i></a>
   </div>
 
+  <div class="layui-btn-container">
+    <a href="javascript:;" id="testopen">testopen <i class="layui-icon layui-icon-down"></i></a>
+    <button class="layui-btn" lay-on="open">open</button>
+    <button class="layui-btn" lay-on="close">close</button>
+  </div>
+
   <div class="layui-bg-gray" style="margin-top: 30px; width: 100%; height: 300px; text-align: center;" id="demo20">
     <span class="layui-font-gray" style="position: relative; top:50%;">鼠标右键菜单</span>
   </div>
@@ -39,6 +45,7 @@
 <script>
 layui.use('dropdown', function () {
   var dropdown = layui.dropdown;
+  var util = layui.util;
 
   dropdown.render({
     elem: '#demo1',
@@ -309,6 +316,23 @@ layui.use('dropdown', function () {
     }
   });
 
+  dropdown.render({
+    elem: '#testopen',
+    id: 'testopen',
+    trigger: "manual",
+    data: [{ id: "refresh", title: "刷新"}]
+  });
+
+  util.on({
+    open: function(){
+      dropdown.open('testopen')
+    },
+    close: function(){
+      dropdown.close('testopen')
+    }
+  },
+  {trigger: 'mouseenter'});
+
   return;
 
   dropdown.render({

src/modules/dropdown.js

@@ -60,6 +60,9 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
       },
       close: function () {
         that.remove()
+      },
+      open: function () {
+        that.render()
       }
     }
   };
@@ -627,6 +630,15 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
     that.remove();
     return thisModule.call(that);
   };
+
+  // 打开面板
+  dropdown.open = function(id){
+    var that = thisModule.getThis(id);
+    if(!that) return this;
+    
+    that.render();
+    return thisModule.call(that);
+  }
   
   // 重载实例
   dropdown.reload = function(id, options, type){