diff --git a/docs/tab/index.md b/docs/tab/index.md
index e97e7850..22d41e10 100644
--- a/docs/tab/index.md
+++ b/docs/tab/index.md
@@ -111,7 +111,7 @@ tab 组件提供了三种 UI 风格,分别为:
| [element.render(\'tab\', filter)](#element.render) | 渲染 tab 组件 |
| [element.tabAdd(filter, options)](#element.tabAdd) | 添加 tab 选项 |
| [element.tabDelete(filter, layid)](#element.tabDelete) | 删除 tab 选项 |
-| [element.tabChange(filter, layid)](#element.tabChange) | 切换 tab 选项 |
+| [element.tabChange(filter, layid, force)](#element.tabChange) | 切换 tab 选项 |
| [element.tab(options)](#element.tab) | 绑定自定义 tab 元素 |
元素属性
@@ -207,10 +207,11 @@ layui.use(function(){
切换 tab
-`element.tabChange(filter, layid);`
+`element.tabChange(filter, layid, force);`
- 参数 `filter` : tab 容器(`class="layui-tab"`)的 `lay-filter` 属性值
- 参数 `layid` : 选项卡标题元素的 `lay-id` 属性值
+- 参数 `force` : 是否强制执行 tab 切换。设置 `true` 后,将忽略 `tabBeforeChange` 事件行为。默认 `false` 2.9.15+
该方法用于切换到对应的 tab 选项。用法详见 : [#示例](#examples)
@@ -290,6 +291,31 @@ element.on('tab(filter)', function(data){
});
```
+tab 切换前的事件 2.9.15+
+
+`element.on('tabBeforeChange(filter)', callback);`
+
+- 参数 `tabBeforeChange(filter)` 是一个特定结构。
+ - `tabBeforeChange` 为 tab 切换前事件固定值;
+ - `filter` 为 tab 容器属性 `lay-filter` 对应的值。
+- 参数 `callback` 为事件执行时的回调函数,并返回一个 `object` 类型的参数。
+
+点击 tab 选项切换前触发。
+
+```
+var element = layui.element;
+
+// tab 切换前的事件
+element.on('tabBeforeChange(filter)', function(data){
+ console.log(data.elem); // 得到当前的 tab 容器
+ console.log(data.from.index); // 得到切换前的 tab 项所在下标
+ console.log(data.from.id); // 得到切换前的 tab 项所在ID
+ console.log(data.to.index); // 得到切换后的 tab 项所在下标
+ console.log(data.to.id); // 得到切换后的 tab 项所在ID
+
+ if(data.to.id === 'home') return false; // 返回 false 时阻止切换到对应的选项卡
+});
+```
tab 删除事件
@@ -318,7 +344,7 @@ element.on('tabDelete(filter)', function(data){
`element.on('tabBeforeDelete(filter)', callback);`
- 参数 `tabBeforeDelete(filter)` 是一个特定结构。
- - `tabBeforeDelete` 为 tab 删除事件固定值;
+ - `tabBeforeDelete` 为 tab 删除前事件固定值;
- `filter` 为 tab 容器属性 `lay-filter` 对应的值。
- 参数 `callback` 为事件执行时的回调函数,并返回一个 `object` 类型的参数。
diff --git a/src/modules/element.js b/src/modules/element.js
index d083c360..ddc9eddc 100644
--- a/src/modules/element.js
+++ b/src/modules/element.js
@@ -66,14 +66,21 @@ layui.define('jquery', function(exports){
return this;
};
- // 外部 Tab 切换
- Element.prototype.tabChange = function(filter, layid){
+ /**
+ * 外部 Tab 切换
+ * @param {string} filter - 标签主容器 lay-filter 值
+ * @param {string} layid - 标签头 lay-id 值
+ * @param {boolean} force - 是否强制切换
+ * @returns {this}
+ */
+ Element.prototype.tabChange = function(filter, layid, force){
var tabElem = $('.layui-tab[lay-filter='+ filter +']');
var titElem = tabElem.children(TITLE);
var liElem = titElem.find('>li[lay-id="'+ layid +'"]');
call.tabClick.call(liElem[0], {
- liElem: liElem
+ liElem: liElem,
+ force: force
});
return this;
};
@@ -140,6 +147,23 @@ layui.define('jquery', function(exports){
var index = 'index' in obj
? obj.index
: othis.parent().children('li').index(othis);
+
+ // 若非强制切换,则根据 tabBeforeChange 事件的返回结果决定是否切换
+ if (!obj.force) {
+ var liThis = othis.siblings('.' + THIS);
+ var shouldChange = layui.event.call(this, MOD_NAME, 'tabBeforeChange('+ filter +')', {
+ elem: parents,
+ from: {
+ index: othis.parent().children('li').index(liThis),
+ id: liThis.attr('lay-id')
+ },
+ to: {
+ index: index,
+ id: hasId
+ },
+ });
+ if(shouldChange === false) return;
+ }
// 执行切换
if(!(isJump || unselect)){