fix(tabs): 优化 closeMult 方法 index 参数值为 lay-id 时的无效问题

pull/2690/head
贤心 2025-05-22 17:37:48 +08:00
parent e60e65e807
commit 40c3e72ea3
3 changed files with 45 additions and 29 deletions

View File

@ -156,19 +156,23 @@ tabs.close('test', 'abc'); // 关闭 lay-id="abc" 的标签
| mode | 描述 | | mode | 描述 |
| --- | --- | | --- | --- |
| other | 关闭除当前标签外的所有标签 | | other | 关闭除当前标签外的其他标签 |
| right | 关闭当前标签及右侧标签 | | right | 关闭当前标签的右侧所有标签 |
| all | 关闭所有标签 | | all | 关闭所有标签 |
- 参数 `index` : 活动标签的索引或 `lay-id` 属性值,默认取当前选中标签的索引。一般用于标签右键事件。 - 参数 `index` : 活动标签的索引或 `lay-id` 属性值,默认取当前选中标签的索引。一般用于标签右键事件。
该方法用于批量关闭标签。 该方法用于批量关闭标签,若标签项已设置不允许关闭(`lay-closable="false"`),则操作将被忽略
```js ```js
tabs.closeMult(id, 'other'); // 关闭除当前标签外的所有标签 tabs.closeMult(id, 'other'); // 关闭除当前活动标签外的其他标签
tabs.closeMult(id, 'other', 3); // 关闭除索引为 3 的标签外的所有标签 tabs.closeMult(id, 'other', 3); // 关闭除索引为 3 的标签外的其他标签
tabs.closeMult(id, 'right'); // 关闭当前标签及右侧标签 tabs.closeMult(id, 'other', 'ccc'); // 关闭除 lay-id="ccc" 的标签外的其他标签
tabs.closeMult(id, 'right'); // 关闭当前活动标签的右侧所有标签
tabs.closeMult(id, 'right', 3); // 关闭索引为 3 的标签的右侧所有标签 tabs.closeMult(id, 'right', 3); // 关闭索引为 3 的标签的右侧所有标签
tabs.closeMult(id, 'right', 'ccc'); // 关闭 lay-id="ccc" 的标签的右侧所有标签
tabs.closeMult(id, 'all'); // 关闭所有标签 tabs.closeMult(id, 'all'); // 关闭所有标签
``` ```

View File

@ -287,6 +287,8 @@
}], }],
click: function(data, othis, event) { click: function(data, othis, event) {
var index = this.elem.index(); // 获取活动标签索引 var index = this.elem.index(); // 获取活动标签索引
var layid = this.elem.attr('lay-id');
// 新增标签操作 // 新增标签操作
if (data.action === 'add') { if (data.action === 'add') {
// 在当前活动标签右侧新增标签页 // 在当前活动标签右侧新增标签页

View File

@ -303,14 +303,9 @@ layui.define('component', function(exports) {
index = index === undefined ? data.index : index; index = index === undefined ? data.index : index;
// 将标签头 lay-closable 属性值同步到 body 项 var headerItem = that.findHeaderItem(index);
headers.each(function(i) { var bodyItem = that.findBodyItem(index);
var othis = $(this); var itemIndex = headerItem.index();
var closableAttr = othis.attr('lay-closable');
if (closableAttr) {
bodys.eq(i).attr('lay-closable', closableAttr);
}
});
// 若当前选中标签也允许关闭,则尝试寻找不可关闭的标签并将其选中 // 若当前选中标签也允许关闭,则尝试寻找不可关闭的标签并将其选中
if (data.thisHeaderItem.attr('lay-closable') !== 'false') { if (data.thisHeaderItem.attr('lay-closable') !== 'false') {
@ -322,23 +317,34 @@ layui.define('component', function(exports) {
} else if(prevHeader[0]) { } else if(prevHeader[0]) {
that.change(prevHeader, true); that.change(prevHeader, true);
} }
} else if(index !== data.index) { // 自动切换到活动标签(功能可取消) } else if(index !== data.index) { // 自动切换到活动标签
that.change(that.findHeaderItem(index), true); that.change(headerItem, true);
} }
} }
// 执行批量关闭标签 // 执行批量关闭标签
if (mode === 'other') { // 关闭其他标签 headers.each(function(i) {
headers.eq(index).siblings(FILTER).remove(); var $this = $(this);
bodys.eq(index).siblings(FILTER).remove(); var layid = $this.attr('lay-id');
} else if(mode === 'right') { // 关闭右侧标签 var bodyItem = that.findBodyItem(layid || i);
headers.filter(':gt('+ index +')'+ FILTER).remove();
bodys.filter(':gt('+ index +')'+ FILTER).remove(); // 标签是否不可关闭
} else { // 关闭所有标签 if ($this.attr('lay-closable') === 'false') {
headers.filter(FILTER).remove(); return;
bodys.filter(FILTER).remove();
} }
// 批量关闭方式
var isCloseOther = mode === 'other' && i !== itemIndex; // 关闭其他标签
var isCloseRight = mode === 'right' && i > itemIndex; // 关闭右侧标签
var isCloseLeft = mode === 'left' && i < itemIndex; // 关闭左侧标签(不推荐)
var isCloseAll = mode === 'all'; // 关闭所有标签
if (isCloseOther || isCloseRight || isCloseLeft || isCloseAll) {
$this.remove();
bodyItem.remove();
}
});
that.roll('auto'); that.roll('auto');
// 回调 // 回调
@ -467,7 +473,11 @@ layui.define('component', function(exports) {
opts = opts || {}; opts = opts || {};
// 不可关闭项 // 不可关闭项
if (opts.closable == false || headerItem.attr('lay-closable') === 'false') { if (opts.closable == false) {
headerItem.attr('lay-closable', 'false');
}
if (headerItem.attr('lay-closable') === 'false') {
return; return;
} }
@ -734,10 +744,10 @@ layui.define('component', function(exports) {
* @param {('other'|'right'|'all')} [mode="all"] - 关闭方式 * @param {('other'|'right'|'all')} [mode="all"] - 关闭方式
* @param {number} index - 活动标签的索引默认取当前选中标签的索引一般用于标签右键事件 * @param {number} index - 活动标签的索引默认取当前选中标签的索引一般用于标签右键事件
*/ */
closeMult: function(id, mode, index, force) { closeMult: function(id, mode, index) {
var that = component.getInst(id); var that = component.getInst(id);
if(!that) return; if(!that) return;
that.closeMult(mode, index, force); that.closeMult(mode, index);
}, },
/** /**