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)
|
用法详见：[#示例](#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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue