mirror of https://github.com/layui/layui
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
GitHub
parent
289c3b4916
commit
4136f7af12
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue