github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat(dropdown): 新增 close 选项 (#1605) 

* feat(dropdown): 新增 close 选项

* update code

* update code

* update code

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

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
pull/1682/head
morning-star 9 months ago committed by GitHub
parent
289c3b4916
commit
4136f7af12
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 267 additions and 187 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      docs/dropdown/detail/options.md
  2. 423
      examples/dropdown.html
  3. 17
      src/modules/dropdown.js

14
docs/dropdown/detail/options.md
Unescape View File

@ -302,6 +302,20 @@ click: function(data, othis){
用法详见：[#示例](#examples) 用法详见：[#示例](#examples)
</td>
</tr>
<tr>
<td>close <sup>2.9.7+</sup></td>
<td colspan="3">
面板关闭后的回调函数。返回的参数如下：
```
close: function(elem){
console.log(elem); // 当前组件绑定的目标元素对象
}
```
</td> </td>
</tr> </tr>
</tbody> </tbody>

423
examples/dropdown.html
Unescape View File

@ -37,225 +37,286 @@
<script src="../src/layui.js"></script> <script src="../src/layui.js"></script>
<script> <script>
layui.use('dropdown', function(){ layui.use('dropdown', function () {
var dropdown = layui.dropdown; var dropdown = layui.dropdown;
dropdown.render({ dropdown.render({
elem: '#demo1' elem: '#demo1',
,shade: [0.1, '#ddd'] shade: [0.1, '#ddd'],
//,align: 'right' //,align: 'right'
,data: [{ data: [
title: 'menu item 1' {
,templet: '<i class="layui-icon layui-icon-light"></i> {{= d.title }} <span class="layui-badge-dot"></span>' title: 'menu item 1',
,id: '' templet:
,href: '' '<i class="layui-icon layui-icon-light"></i> {{= d.title }} <span class="layui-badge-dot"></span>',
,type: '' //菜单类型，支持：normal/group/parent id: '',
},{ href: '',
title: 'menu item <strong>2</strong>' type: '' //菜单类型，支持：normal/group/parent
,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/' title: 'menu item <strong>2</strong>',
,target: '_blank' templet:
},{type: '-'},{},{ '<img src="https://unpkg.com/outeres@0.1.1/demo/avatar/0.png" style="width: 16px;"> {{- d.title }}',
title: 'menu item 3 <hello>' id: '',
,id: '' href: 'https://www.layui.com/',
,type: 'group' target: '_blank'
,child: [{ },
title: 'menu item 3-1' { type: '-' },
,id: '' {},
},{ {
title: 'menu item 3-2' title: 'menu item 3 <hello>',
,id: '' id: '',
,child: [{ type: 'group',
title: 'menu item 3-2-1' child: [
,id: '' {
},{ title: 'menu item 3-1',
title: 'menu item 3-2-2' id: ''
,id: '' },
,type: 'group' {
,child: [{ title: 'menu item 3-2',
title: 'menu item 3-2-2-1' id: '',
,id: '' child: [
},{ {
title: 'menu item 3-2-2-2' title: 'menu item 3-2-1',
,id: '' id: ''
}] },
},{ {
title: 'menu item 3-2-3' title: 'menu item 3-2-2',
,id: '' id: '',
}] type: 'group',
},{ child: [
title: 'menu item 3-3' {
,id: '' title: 'menu item 3-2-2-1',
,type: 'group' id: ''
,child: [{ },
title: 'menu item 3-3-1' {
,id: '' title: 'menu item 3-2-2-2',
},{ id: ''
title: 'menu item 3-3-2' }
,id: '' ]
,child: [{ },
title: 'menu item 3-3-2-1' {
,id: '' title: 'menu item 3-2-3',
},{ id: ''
title: 'menu item 3-3-2-2' }
,id: '' ]
},{ },
title: 'menu item 3-3-2-3' {
,id: '' title: 'menu item 3-3',
}] id: '',
},{ type: 'group',
title: 'menu item 3-3-3' child: [
,id: '' {
}] title: 'menu item 3-3-1',
}] id: ''
} },
,{type: '-'} {
,{ title: 'menu item 3-3-2',
title: 'menu item 4' id: '',
,id: '' child: [
},{ {
title: 'menu item 5' title: 'menu item 3-3-2-1',
,id: '' id: ''
,child: [{ },
title: 'menu item 5-1' {
,id: '' title: 'menu item 3-3-2-2',
,child: [{ id: ''
title: 'menu item 5-1-1' },
,id: '' {
},{ title: 'menu item 3-3-2-3',
title: 'menu item 5-1-2' id: ''
,id: '' }
},{ ]
title: 'menu item 5-1-3' },
,id: '' {
}] title: 'menu item 3-3-3',
},{ id: ''
title: 'menu item 5-2' }
,id: '' ]
},{ }
title: 'menu item 5-3' ]
,id: '' },
}] { type: '-' },
},{type:'-'},{ {
title: 'menu item 6' title: 'menu item 4',
,id: '' id: ''
,type: 'group' },
,isSpreadItem: false {
,child: [{ title: 'menu item 5',
title: 'menu item 6-1' id: '',
,id: '' child: [
},{ {
title: 'menu item 6-2' title: 'menu item 5-1',
,id: '' id: '',
},{ child: [
title: 'menu item 6-3' {
,id: '' 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: 所有父子菜单均触发点击事件 // 触发点击事件的元素范围 --- default: 仅子菜单触发点击事件（默认，可不填）; all: 所有父子菜单均触发点击事件
,clickScope: 'all' clickScope: 'all',
// 菜单被点击的事件 // 菜单被点击的事件
,click: function(obj){ click: function (obj) {
console.log(obj); console.log(obj);
} }
}); });
var inst = dropdown.render({ var inst = dropdown.render({
elem: '#demo2' elem: '#demo2',
// ,show: true // ,show: true
,data: [{ data: [
title: 'menu item 1' {
,href: '#1' title: 'menu item 1',
,disabled: true href: '#1',
},{ disabled: true
title: 'menu item 2(点击不关闭)' },
,href: '#2' {
,id: 'bbb' title: 'menu item 2(点击不关闭)',
},{ href: '#2',
title: 'menu item 3' id: 'bbb'
,href: '#3' },
}] {
,click: function(data, othis){ title: 'menu item 3',
href: '#3'
}
],
click: function (data, othis) {
console.log(data); console.log(data);
if(data.id === 'bbb'){ if (data.id === 'bbb') {
return false; return false;
} }
} },
,ready: function(){ ready: function () {
console.log(arguments); console.log(arguments);
},
close: function () {
console.log('demo2', this.elem);
} }
}); });
dropdown.render({ dropdown.render({
elem: '#demo3' elem: '#demo3',
,content: '自定义内容 123 ' content: '自定义内容 123 ',
,style: 'background:#666;color:#fff;padding:15px;' style: 'background:#666;color:#fff;padding:15px;',
,align: 'center' align: 'center',
,trigger: 'hover' trigger: 'hover',
close: function () {
console.log('demo3', this.elem);
}
}); });
//右键 //右键
dropdown.render({ dropdown.render({
elem: document//'#demo20' //也可绑定到 document，从而重置整个右键 elem: document, //'#demo20' //也可绑定到 document，从而重置整个右键
,trigger: 'contextmenu' //contextmenu trigger: 'contextmenu', //contextmenu
,isAllowSpread: false isAllowSpread: false,
//,style: 'width: 200px' //,style: 'width: 200px'
,customName: { customName: {
children: 'children' children: 'children'
} },
,data: [{ data: [
title: 'menu item 1' {
,id: '#1' title: 'menu item 1',
},{ id: '#1'
title: 'menu item 2' },
,id: 'reload' {
},{type:'-'},{ title: 'menu item 2',
title: 'menu item 3' id: 'reload'
,id: '#3' },
,children: [{ { type: '-' },
title: 'menu item 3-1' {
,id: '#1' title: 'menu item 3',
},{ id: '#3',
title: 'menu item 3-2' children: [
,id: '#2' {
},{ title: 'menu item 3-1',
title: 'menu item 3-3' id: '#1'
,id: '#3' },
}] {
},{type:'-'},{ title: 'menu item 3-2',
title: 'menu item 4' id: '#2'
,id: '' },
},{ {
title: 'menu item 5' title: 'menu item 3-3',
,id: '#1' id: '#3'
},{ }
title: 'menu item 6' ]
,id: '#1' },
}] { type: '-' },
,click: function(obj, othis){ {
if(obj.id === 'reload'){ 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(); location.reload();
} }
} }
}); });
return; return;
dropdown.render({ dropdown.render({
elem: document elem: document,
,content: '123' content: '123'
}); });
}); });
</script> </script>
</body> </body>
</html> </html>

17
src/modules/dropdown.js
Unescape View File

@ -377,14 +377,19 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
Class.prototype.remove = function(){ Class.prototype.remove = function(){
var that = this; var that = this;
var options = that.config; var options = that.config;
var elemPrev = thisModule.prevElem; var prevContentElem = thisModule.prevElem;
// 若存在已打开的面板元素，则移除 // 若存在已打开的面板元素，则移除
if(elemPrev){ if(prevContentElem){
elemPrev.data('prevElem') && ( var prevId = prevContentElem.attr('lay-id');
elemPrev.data('prevElem').data(MOD_INDEX +'_opened', false) var prevTriggerElem = prevContentElem.data('prevElem');
); var prevInstance = thisModule.getThis(prevId);
elemPrev.remove(); 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(); lay('.' + STR_ELEM_SHADE).remove();
}; };

Write Preview
Loading…
Cancel
Save