feat(layer): 新增 beforeEnd 回调 (#1968)
* feat(layer): 新增 beforeEnd 回调 * docs(layer): 更新 beforeEnd 文档 * update * update * refactor: 简化代码 * docs(layer): 更新 beforeEnd 文档 * update * update
This commit is contained in:
morning-star
GitHub
parent
c32e65b944
commit
d81ada23b1
@ -733,6 +733,41 @@ layer.open({
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[beforeEnd](#options.beforeEnd) <sup>2.9.11+</sup>
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.beforeEnd" lay-pid="options" class="ws-anchor">
|
||||
弹层被关闭前的回调函数。如果返回 false 或者 Promise.reject，将会取消关闭操作。
|
||||
</div>
|
||||
|
||||
```
|
||||
layer.open({
|
||||
content: '<div style="padding: 32px;"><input id="id"/></div>',
|
||||
/** @type {(layero: JQuery, index: number) => boolean | JQueryDeferred<boolean> | Promise<boolean>} */
|
||||
beforeEnd: function(layero, index){
|
||||
return $.Deferred(function(defer){
|
||||
var el = layero.find('#id');
|
||||
var val = el.val().trim();
|
||||
if(val){
|
||||
layer.confirm('关闭后您填写的内容将不会得到保存，确定关闭吗？', function (i) {
|
||||
layer.close(i);
|
||||
defer.resolve(true)
|
||||
});
|
||||
}else{
|
||||
defer.resolve(true)
|
||||
}
|
||||
}).promise();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[end](#options.end)
|
||||
|
||||
</td>
|
||||
|
||||
@ -30,6 +30,7 @@ var ready = {
|
||||
removeFocus: true
|
||||
},
|
||||
end: {},
|
||||
beforeEnd: {},
|
||||
events: {resize: {}},
|
||||
minStackIndex: 0,
|
||||
minStackArr: [],
|
||||
@ -925,6 +926,7 @@ Class.pt.callback = function(){
|
||||
});
|
||||
|
||||
config.end && (ready.end[that.index] = config.end);
|
||||
config.beforeEnd && (ready.beforeEnd[that.index] = config.beforeEnd);
|
||||
};
|
||||
|
||||
// for ie6 恢复 select
|
||||
@ -1219,87 +1221,116 @@ layer.close = function(index, callback){
|
||||
|
||||
if(!layero[0]) return;
|
||||
|
||||
// 关闭动画
|
||||
var closeAnim = ({
|
||||
slideDown: 'layer-anim-slide-down-out',
|
||||
slideLeft: 'layer-anim-slide-left-out',
|
||||
slideUp: 'layer-anim-slide-up-out',
|
||||
slideRight: 'layer-anim-slide-right-out'
|
||||
})[options.anim] || 'layer-anim-close';
|
||||
|
||||
// 移除主容器
|
||||
var remove = function(){
|
||||
var WRAP = 'layui-layer-wrap';
|
||||
|
||||
// 是否关闭时隐藏弹层容器
|
||||
if(hideOnClose){
|
||||
layero.removeClass('layer-anim '+ closeAnim);
|
||||
return layero.hide();
|
||||
}
|
||||
|
||||
// 是否为页面捕获层
|
||||
if(type === ready.type[1] && layero.attr('conType') === 'object'){
|
||||
layero.children(':not(.'+ doms[5] +')').remove();
|
||||
var wrap = layero.find('.'+WRAP);
|
||||
for(var i = 0; i < 2; i++){
|
||||
wrap.unwrap();
|
||||
var executor = function(){
|
||||
// 关闭动画
|
||||
var closeAnim = ({
|
||||
slideDown: 'layer-anim-slide-down-out',
|
||||
slideLeft: 'layer-anim-slide-left-out',
|
||||
slideUp: 'layer-anim-slide-up-out',
|
||||
slideRight: 'layer-anim-slide-right-out'
|
||||
})[options.anim] || 'layer-anim-close';
|
||||
|
||||
// 移除主容器
|
||||
var remove = function(){
|
||||
var WRAP = 'layui-layer-wrap';
|
||||
|
||||
// 是否关闭时隐藏弹层容器
|
||||
if(hideOnClose){
|
||||
layero.removeClass('layer-anim '+ closeAnim);
|
||||
return layero.hide();
|
||||
}
|
||||
wrap.css('display', wrap.data('display')).removeClass(WRAP);
|
||||
} else {
|
||||
// 低版本 IE 回收 iframe
|
||||
if(type === ready.type[2]){
|
||||
try {
|
||||
var iframe = $('#'+ doms[4] + index)[0];
|
||||
iframe.contentWindow.document.write('');
|
||||
iframe.contentWindow.close();
|
||||
layero.find('.'+doms[5])[0].removeChild(iframe);
|
||||
} catch(e){}
|
||||
|
||||
// 是否为页面捕获层
|
||||
if(type === ready.type[1] && layero.attr('conType') === 'object'){
|
||||
layero.children(':not(.'+ doms[5] +')').remove();
|
||||
var wrap = layero.find('.'+WRAP);
|
||||
for(var i = 0; i < 2; i++){
|
||||
wrap.unwrap();
|
||||
}
|
||||
wrap.css('display', wrap.data('display')).removeClass(WRAP);
|
||||
} else {
|
||||
// 低版本 IE 回收 iframe
|
||||
if(type === ready.type[2]){
|
||||
try {
|
||||
var iframe = $('#'+ doms[4] + index)[0];
|
||||
iframe.contentWindow.document.write('');
|
||||
iframe.contentWindow.close();
|
||||
layero.find('.'+doms[5])[0].removeChild(iframe);
|
||||
} catch(e){}
|
||||
}
|
||||
layero[0].innerHTML = '';
|
||||
layero.remove();
|
||||
}
|
||||
layero[0].innerHTML = '';
|
||||
layero.remove();
|
||||
}
|
||||
|
||||
typeof ready.end[index] === 'function' && ready.end[index]();
|
||||
delete ready.end[index];
|
||||
typeof callback === 'function' && callback();
|
||||
|
||||
// 移除 reisze 事件
|
||||
if(ready.events.resize[index]){
|
||||
win.off('resize', ready.events.resize[index]);
|
||||
delete ready.events.resize[index];
|
||||
}
|
||||
};
|
||||
// 移除遮罩
|
||||
var shadeo = $('#'+ doms.SHADE + index);
|
||||
if((layer.ie && layer.ie < 10) || !options.isOutAnim){
|
||||
shadeo[hideOnClose ? 'hide' : 'remove']();
|
||||
}else{
|
||||
shadeo.css({opacity: 0});
|
||||
setTimeout(function(){
|
||||
|
||||
typeof ready.end[index] === 'function' && ready.end[index]();
|
||||
delete ready.end[index];
|
||||
typeof callback === 'function' && callback();
|
||||
|
||||
// 移除 reisze 事件
|
||||
if(ready.events.resize[index]){
|
||||
win.off('resize', ready.events.resize[index]);
|
||||
delete ready.events.resize[index];
|
||||
}
|
||||
};
|
||||
// 移除遮罩
|
||||
var shadeo = $('#'+ doms.SHADE + index);
|
||||
if((layer.ie && layer.ie < 10) || !options.isOutAnim){
|
||||
shadeo[hideOnClose ? 'hide' : 'remove']();
|
||||
}, 350);
|
||||
}else{
|
||||
shadeo.css({opacity: 0});
|
||||
setTimeout(function(){
|
||||
shadeo[hideOnClose ? 'hide' : 'remove']();
|
||||
}, 350);
|
||||
}
|
||||
|
||||
// 是否允许关闭动画
|
||||
if(options.isOutAnim){
|
||||
layero.addClass('layer-anim '+ closeAnim);
|
||||
}
|
||||
|
||||
layer.ie == 6 && ready.reselect();
|
||||
ready.restScrollbar(index);
|
||||
|
||||
// 记住被关闭层的最小化堆叠坐标
|
||||
if(typeof layero.attr('minLeft') === 'string'){
|
||||
ready.minStackIndex--;
|
||||
ready.minStackArr.push(layero.attr('minLeft'));
|
||||
}
|
||||
|
||||
if((layer.ie && layer.ie < 10) || !options.isOutAnim){
|
||||
remove()
|
||||
} else {
|
||||
setTimeout(function(){
|
||||
remove();
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
// 是否允许关闭动画
|
||||
if(options.isOutAnim){
|
||||
layero.addClass('layer-anim '+ closeAnim);
|
||||
}
|
||||
|
||||
layer.ie == 6 && ready.reselect();
|
||||
ready.restScrollbar(index);
|
||||
|
||||
// 记住被关闭层的最小化堆叠坐标
|
||||
if(typeof layero.attr('minLeft') === 'string'){
|
||||
ready.minStackIndex--;
|
||||
ready.minStackArr.push(layero.attr('minLeft'));
|
||||
}
|
||||
|
||||
if((layer.ie && layer.ie < 10) || !options.isOutAnim){
|
||||
remove()
|
||||
} else {
|
||||
setTimeout(function(){
|
||||
remove();
|
||||
}, 200);
|
||||
|
||||
if(!hideOnClose && typeof ready.beforeEnd[index] === 'function'){
|
||||
// 类似 Promise.resolve
|
||||
var promiseLikeResolve = function(value){
|
||||
var deferred = $.Deferred();
|
||||
|
||||
if(value && typeof value.then === 'function'){
|
||||
value.then(deferred.resolve, deferred.reject);
|
||||
}else{
|
||||
deferred.resolve(value);
|
||||
}
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
promiseLikeResolve(ready.beforeEnd[index](layero, index))
|
||||
.then(function(result){
|
||||
if(result !== false){
|
||||
delete ready.beforeEnd[index];
|
||||
executor();
|
||||
}
|
||||
}, function(reason){
|
||||
reason !== undefined && window.console && window.console.error('layer error hint: ' + reason);
|
||||
});
|
||||
}else{
|
||||
delete ready.beforeEnd[index];
|
||||
executor();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user