From 82a497927c449f58bbc7d8a9141cc054649bac84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?=
 <3277200+sentsim@users.noreply.github.com>
Date: Wed, 5 Mar 2025 19:36:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20tabs=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=A4=A7=E9=87=8F=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/tabs.html  | 107 ++++++---
 src/css/layui.css   |   8 +-
 src/modules/tabs.js | 549 +++++++++++++++++++++++++++-----------------
 3 files changed, 422 insertions(+), 242 deletions(-)
diff --git a/examples/tabs.html b/examples/tabs.html
index 12241777..5a6eff73 100644
--- a/examples/tabs.html
+++ b/examples/tabs.html
@@ -7,10 +7,11 @@
     <link rel="stylesheet" href="../src/css/layui.css">
   </head>
 <body>
-  <div class="layui-container layui-padding-3">
+  <div class="layui-container layui-padding-3 layui-text">
+    <h2>动态操作</h2>
     <div class="layui-tabs layui-hide-v" id="demoTabs1" lay-options="{closable: true, headerMode:'scroll'}">
       <ul class="layui-tabs-header">
-        <li lay-id="aaa" lay-unclosed="true" class="layui-this">Tab1</li>
+        <li lay-id="aaa" lay-closable="false">Tab1</li>
         <li lay-id="bbb">Tab2</li>
         <li lay-id="ccc">Tab3</li>
         <li lay-id="ddd">Tab4</li>
@@ -18,7 +19,7 @@
         <li lay-id="fff">Tab6</li>
       </ul>
       <div class="layui-tabs-body">
-        <div class="layui-tabs-item layui-show">Tab Content-1</div>
+        <div class="layui-tabs-item">Tab Content-1</div>
         <div class="layui-tabs-item">Tab Content-2</div>
         <div class="layui-tabs-item">Tab Content-3</div>
         <div class="layui-tabs-item">Tab Content-4</div>
@@ -35,14 +36,10 @@
       <button class="layui-btn" lay-on="add">添加 Tab</button>
     </div>
 
-    <div class="layui-py">
-      方法渲染：
-      <hr class="layui-my">
-      <div id="demoTabs2"></div>
-    </div>
-
-    <div class="layui-py">卡片风格：</div>
+    <h2>方法渲染</h2>
+    <div id="demoTabs2"></div>
 
+    <h2>卡片风格</h2>
     <div class="layui-tabs layui-tabs-card" lay-options="{index: 1}">
       <ul class="layui-tabs-header">
         <li>标题1</li>
@@ -62,8 +59,7 @@
       </div>
     </div>
 
-    <div class="layui-py">卡片 + 边框：</div>
-
+    <h3>卡片 + 边框</h3>
     <div class="layui-tabs layui-tabs-card layui-panel layui-inline">
       <ul class="layui-tabs-header layui-bg-tint">
         <li class="layui-this">标题1</li>
@@ -94,8 +90,7 @@
       </div>
     </div>
 
-    <div class="layui-py">HASH：</div>
-
+    <h2>标签 HASH 定位</h2>
     <div class="layui-tabs layui-hide-v" id="demoTabs-hash">
       <ul class="layui-tabs-header">
         <li lay-id="A1" class="layui-this"><a href="#A1">标题题题题题题1</a></li>
@@ -109,8 +104,7 @@
       </ul>
     </div>
 
-    <div class="layui-py">标签嵌套：</div>
-
+    <h2>标签嵌套</h2>
     <div class="layui-tabs layui-tabs-card" lay-options="{headerMode:'normal'}">
       <ul class="layui-tabs-header">
         <li class="layui-this">标题1</li>
@@ -150,10 +144,8 @@
       </div>
     </div>
 
-    <div class="layui-py" id="demoTabs3">
-      给任意元素添加 Tab 功能：
-      <hr class="layui-my">
-
+    <h2>给任意元素绑定 tabs 切换功能</h2>
+    <div id="demoTabs3">
       <style>
         #demoTabsHeader .layui-btn.layui-this{border-color: #eee; color: #000; background: none;}
         #demoTabsBody .test-item{display: none;}
@@ -168,18 +160,19 @@
         <div class="test-item">内容 222</div>
         <div class="test-item">内容 333</div>
       </div>
-
     </div>
 
   </div>
 
   <script src="../src/layui.js"></script>
   <script>
-  layui.use(['tabs', 'form', 'util'], function(){
+  layui.use(function() {
     var tabs = layui.tabs
     var util = layui.util;
+    var layer = layui.layer;
+    var dropdown = layui.dropdown;
 
-    // 事件
+    // 自定义事件
     util.on({
       add: function(){
         var n = Math.random()*1000 | 0; // 演示标记
@@ -198,6 +191,69 @@
       }
     });
 
+    // tabs 关闭前的事件
+    tabs.on('beforeClose(demoTabs1)', function(data) {
+      console.log('beforeClose', data);
+
+      // 关闭确认提示
+      layer.confirm(`确定关闭标签「${this.innerText}」吗？`, function(i) {
+        tabs.close('demoTabs1', data.index, true); // 强制关闭对应的标签项
+        layer.close(i); // 关闭确认框
+      });
+      return false; // 阻止标签默认关闭
+    });
+
+    // tabs 关闭后的事件
+    tabs.on('afterClose(demoTabs1)', function(data) {
+      console.log('afterClose', data);
+    });
+
+    // tabs 切换前的事件
+    tabs.on('beforeChange(demoTabs1)', function(data) {
+      console.log('beforeChange', data);
+
+      // 切换确认提示
+      /*layer.confirm(`确定从「当前标签」切换到标签「${this.innerText}」吗？`, function(i) {
+        tabs.change('demoTabs1', data.to.index, true); // 强制切换
+        layer.close(i); // 关闭确认框
+      });
+      return false; // 阻止标签默认关闭*/
+    });
+
+    // tabs 切换后的事件
+    tabs.on('afterChange(demoTabs1)', function(data) {
+      console.log('afterChange', data);
+    });
+
+    // 为标签头添加上下文菜单
+    dropdown.render({
+      elem: '#demoTabs1 .layui-tabs-header>li',
+      trigger: 'contextmenu',
+      data: [{
+        title: '关闭',
+        type: 'this'
+      }, {
+        title: '关闭其他标签页',
+        type: 'other'
+      }, {
+        title: '关闭右侧标签页',
+        type: 'right'
+      }, {
+        type: '-'
+      }, {
+        title: '关闭所有标签页',
+        type: 'all'
+      }],
+      click: function(data, othis, event) {
+        var index = this.elem.index();
+        if (data.type === 'this') {
+          tabs.close('demoTabs1', index); // 关闭当前标签
+        } else {
+          tabs.closeMult('demoTabs1', data.type, index); // 批量关闭标签
+        }
+      }
+    });
+
     // 方法渲染
     tabs.render({
       elem: '#demoTabs2',
@@ -225,10 +281,7 @@
     tabs.render({
       elem: '#demoTabs3',
       header: ['#demoTabsHeader', '>button'],
-      body: ['#demoTabsBody', '>.test-item'],
-      change: function(obj) {
-        console.log(obj);
-      }
+      body: ['#demoTabsBody', '>.test-item']
     });
   });
   </script>
diff --git a/src/css/layui.css b/src/css/layui.css
index cb902c09..fb4502f8 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -1278,19 +1278,21 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 /* 下拉菜单 */
 .layui-dropdown{position: absolute; left: -999999px; top: -999999px; z-index: 77777777; margin: 5px 0; min-width: 100px;}
 .layui-dropdown:before{content:""; position: absolute; width: 100%; height: 6px; left: 0; top: -6px;}
-.layui-dropdown-shade{top: 0; left: 0; width: 100%; height: 100%; _height: expression(document.body.offsetHeight+"px"); position: fixed; _position: absolute; pointer-events: auto;}
+.layui-dropdown-shade{top: 0; left: 0; width: 100%; height: 100%; position: fixed; pointer-events: auto;}
 
 
 /* Tabs 标签页 */
 .layui-tabs{position: relative;}
 .layui-tabs *{box-sizing: border-box;}
 .layui-tabs.layui-hide-v{overflow: hidden;}
-.layui-tabs-header{position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; transition: all .16s; -webkit-transition: all .16s;}
+.layui-tabs-header{position: relative; left: 0; height: 40px; padding: 0 !important; white-space: nowrap; font-size: 0; transition: all .16s; -webkit-transition: all .16s;}
 .layui-tabs-header:after,
 .layui-tabs-scroll:after{content: ""; position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; border-bottom: 1px solid #eee;}
 .layui-tabs-header li{position: relative; display: inline-block; vertical-align: middle; line-height: 40px; margin: 0 !important; padding: 0 16px; text-align: center; cursor: pointer; font-size: 14px; transition: all .16s; -webkit-transition: all .16s;}
 .layui-tabs-header li:first-child{margin-left: 0;}
-.layui-tabs-header li a{display: block; padding: 0 16px; margin: 0 -16px;}
+.layui-tabs-header li a{display: block; padding: 0 16px; margin: 0 -16px; color: inherit;}
+.layui-tabs-header li a:hover{text-decoration: none;}
+.layui-tabs-header li:hover,
 .layui-tabs-header .layui-this{color: #16baaa;}
 .layui-tabs-header .layui-this:after{content: ""; position: absolute; left:0; top: 0; z-index: 1; width: 100%; height: 100%; border-bottom: 3px solid #16baaa; box-sizing: border-box; pointer-events: none;}
 .layui-tabs-header .layui-badge,
diff --git a/src/modules/tabs.js b/src/modules/tabs.js
index 7869fb54..4c1ab889 100644
--- a/src/modules/tabs.js
+++ b/src/modules/tabs.js
@@ -15,8 +15,8 @@ layui.define('component', function(exports) {
     // 默认配置
     config: {
       elem: '.layui-tabs',
-      trigger: 'click', // 触发事件
-      headerMode: 'auto' // 标签头部的显示模式
+      trigger: 'click', // 标签切换的触发事件
+      headerMode: 'auto' // 标签头部的显示模式 auto | scroll | normal
     },
 
     CONST: {
@@ -25,8 +25,7 @@ layui.define('component', function(exports) {
       CLOSE: 'layui-tabs-close',
       BODY: 'layui-tabs-body',
       ITEM: 'layui-tabs-item',
-      CARD: 'layui-tabs-card',
-      TRIGGER_NAME: 'LAY_TABS_ELEM_callback'
+      CARD: 'layui-tabs-card'
     },
 
     isRenderOnEvent: false,
@@ -37,70 +36,70 @@ layui.define('component', function(exports) {
       var options = that.config;
 
       // 标签页元素项
-      that.elemHeader = ['.'+ component.CONST.HEADER + ':eq(0)', '>li'];
-      that.elemBody = ['.'+ component.CONST.BODY + ':eq(0)', '>.'+ component.CONST.ITEM];
+      that.headerElem = ['.'+ component.CONST.HEADER + ':eq(0)', '>li'];
+      that.bodyElem = ['.'+ component.CONST.BODY + ':eq(0)', '>.'+ component.CONST.ITEM];
 
-      // 获取头部和内容元素
-      that.elemItem = function(){
-        var thisElem = that.thisElem || options.elem;
+      // 获取标签容器中的 header body 相关元素
+      that.getContainer = function() {
+        var elem = that.documentElem || options.elem;
         return {
           header: {
-            elem: thisElem.find(that.elemHeader[0]),
-            items: thisElem.find(that.elemHeader.join(''))
+            elem: elem.find(that.headerElem[0]),
+            items: elem.find(that.headerElem.join(''))
           },
           body: {
-            elem: thisElem.find(that.elemBody[0]),
-            items: thisElem.find(that.elemBody.join(''))
+            elem: elem.find(that.bodyElem[0]),
+            items: elem.find(that.bodyElem.join(''))
           }
         };
       };
 
-      // 如果传入 header 参数
+      // 若 header 选项类型为数组
       if (layui.type(options.header) === 'array') {
         if (options.header.length === 0) return;
 
-        // 是否为元素绑定
+        // 给任意元素绑定 tabs 切换功能
         if (typeof options.header[0] === 'string') {
-          that.elemHeader = options.header.concat();
-          that.thisElem = $('body');
+          that.headerElem = options.header.concat();
+          that.documentElem = $(document);
         } else { // 方法传值渲染
           that.elemView = $('<div class="layui-tabs"></div>');
           if (options.className) that.elemView.addClass(options.className);
 
-          var elemHeader = $('<ul class="layui-tabs-header"></ul>');
-          var elemBody = $('<div class="layui-tabs-body"></div>');
+          var headerElem = $('<ul class="layui-tabs-header"></ul>');
+          var bodyElem = $('<div class="layui-tabs-body"></div>');
 
           // 生成标签项
           layui.each(options.header, function(i, item){
             var elemHeaderItem = that.renderHeaderItem(item);
-            elemHeader.append(elemHeaderItem);
+            headerElem.append(elemHeaderItem);
           });
           layui.each(options.body, function(i, item){
             var elemBodyItem = that.renderBodyItem(item);
-            elemBody.append(elemBodyItem);
+            bodyElem.append(elemBodyItem);
           });
 
-          that.elemView.append(elemHeader).append(elemBody);
+          that.elemView.append(headerElem).append(bodyElem);
           options.elem.html(that.elemView);
         }
       } else {
         that.renderClose(); // 初始化标签关闭结构
       }
 
-      // 如果传入 body 参数
+      // 若 body 选项类型为数组
       if (layui.type(options.body) === 'array') {
         if (typeof options.body[0] === 'string') {
-          that.thisElem = $('body');
-          that.elemBody = options.body.concat();
+          that.documentElem = $(document);
+          that.bodyElem = options.body.concat();
         }
       }
 
       // 初始选中项
       var data = that.data();
       if ('index' in options && data.index != options.index) {
-        that.change(that.findHeaderItem(options.index));
-      } else if (data.index === -1) {
-        that.change(that.findHeaderItem(0));
+        that.change(that.findHeaderItem(options.index), true);
+      } else if (data.index === -1) { // 初始选中项为空时，默认选中第一个
+        that.change(that.findHeaderItem(0), true);
       }
 
       // 初始化滚动结构
@@ -112,41 +111,45 @@ layui.define('component', function(exports) {
       }
 
       // 回调
-      typeof options.ready === 'function' && options.ready(data);
-      layui.event.call(options.elem[0], component.CONST.MOD_NAME, 'ready('+ options.id +')', data); // 事件
+      typeof options.afterRender === 'function' && options.afterRender(data);
+
+      // 渲染成功后的事件
+      layui.event.call(
+        options.elem[0],
+        component.CONST.MOD_NAME,
+        'afterRender('+ options.id +')',
+        data
+      );
     },
 
     // 事件
     events: function() {
       var that = this;
       var options = that.config;
-      var elemItem = that.elemItem();
-      var TRIGGER_NAME = component.CONST.TRIGGER_NAME;
-      var thisElem = that.thisElem ? elemItem.header.elem : options.elem;
+      var container = that.getContainer();
+      var MOD_NAME = component.CONST.MOD_NAME;
+      var TRIGGER_NAMESPACE = '.lay_'+ MOD_NAME + '_trigger';
+      var delegatedElement = that.documentElem ? container.header.elem : options.elem;
 
-      // 移除重复事件
-      if (thisElem.data(TRIGGER_NAME)) {
-        thisElem.off(options.trigger, thisElem.data(TRIGGER_NAME));
-      }
-
-      // 点击标签头部
-      var elemHeaderItem = that.thisElem ? that.elemHeader[1] : that.elemHeader.join('');
-      thisElem.data(TRIGGER_NAME, function(){
+      // 标签头部事件
+      var trigger = options.trigger + TRIGGER_NAMESPACE;
+      var elemHeaderItem = that.documentElem ? that.headerElem[1] : that.headerElem.join('');
+      delegatedElement.off(trigger).on(trigger, elemHeaderItem, function() {
         that.change($(this));
-      }).on(options.trigger, elemHeaderItem, thisElem.data(TRIGGER_NAME));
+      });
 
-      // resize 事件
+      // 窗口 resize 事件
       if (!inner.onresize) {
         var timer;
-        $(window).on('resize', function(){
+        $(window).on('resize', function() {
           clearTimeout(timer);
           timer = setTimeout(function(){
-            layui.each(component.cache.id, function(key){
+            layui.each(component.cache.id, function(key) {
               var that = component.getThis(key);
               if(!that) return;
               that.roll('init');
             });
-          },50);
+          }, 50);
         });
         inner.onresize = true;
       }
@@ -164,116 +167,160 @@ layui.define('component', function(exports) {
 
   /**
    * 增加标签
-   * @param {*} obj
+   * @param {Object} opts
+   * @param {string} opts.title - 标签标题
+   * @param {string} opts.content - 标签内容
+   * @param {string} opts.id - 标签的 lay-id 属性值
+   * @param {string} [opts.index] - 活动标签索引，默认取当前选中标签的索引
+   * @param {('append'|'prepend'|'after'|'before')} [opts.mode='append'] - 标签插入方式
+   * @param {string} [opts.closable] - 标签是否可关闭。初始值取决于 options.closable
+   * @param {string} [opts.headerItem] - 自定义标签头部元素
+   * @param {string} [opts.bodyItem] - 自定义标签内容元素
+   * @param {Function} [opts.done] - 标签添加成功后执行的回调函数
    */
-  Class.prototype.add = function(obj){
+  Class.prototype.add = function(opts) {
     var that = this;
     var options = that.config;
-    var elemItem = that.elemItem();
-    var newHeaderItem = that.renderHeaderItem(obj);
-    var newBodyItem = that.renderBodyItem(obj);
+    var container = that.getContainer();
+    var newHeaderItem = that.renderHeaderItem(opts);
+    var newBodyItem = that.renderBodyItem(opts);
 
     // 插入方式
-    if (obj.mode === 'curr') { // 在当前标签后插入
+    if (/(before|after)/.test(opts.mode)) { // 在活动标签前后插入
       var data = that.data();
-      data.thisHeader.after(newHeaderItem);
-      data.thisBody.after(newBodyItem);
-    } else {
+      var hasOwnIndex = opts.hasOwnProperty('index');
+      var headerItem = hasOwnIndex ? that.findHeaderItem(opts.index) : data.thisHeaderItem;
+      var bodyItem = hasOwnIndex ? that.findBodyItem(opts.index) : data.thisHeaderItem;
+      headerItem[opts.mode](newHeaderItem);
+      bodyItem[opts.mode](newBodyItem);
+    } else { // 在标签最前后插入
       var mode = ({
-        prepend: 'prepend'
-        ,append: 'append'
-      })[obj.mode || 'append'] || 'append';
-      elemItem.header.elem[mode](newHeaderItem);
-      elemItem.body.elem[mode](newBodyItem);
+        prepend: 'prepend', // 插入标签到最前
+        append: 'append' // 插入标签到最后
+      })[opts.mode || 'append'] || 'append';
+      container.header.elem[mode](newHeaderItem);
+      container.body.elem[mode](newBodyItem);
     }
 
     // 将插入项切换为当前标签
-    that.change(newHeaderItem);
+    that.change(newHeaderItem, true);
 
     // 回调
     var params = that.data();
-    typeof obj.done === 'function' && obj.done(params);
-    typeof options.add === 'function' && options.add(params);
-    layui.event.call(newHeaderItem[0], component.CONST.MOD_NAME, 'add('+ options.id +')', params); // 事件
+    typeof opts.done === 'function' && opts.done(params);
   };
 
-  // 关闭指定标签
-  Class.prototype.close = function(thisHeader) {
-    if(!thisHeader || !thisHeader[0]) return;
+  /**
+   * 关闭指定标签
+   * @param {Object} thisHeaderItem - 当前标签头部项元素
+   * @param {boolean} force - 是否强制删除
+   */
+  Class.prototype.close = function(thisHeaderItem, force) {
+    if(!thisHeaderItem || !thisHeaderItem[0]) return;
 
     var that = this;
     var options = that.config;
-    var index = thisHeader.index();
+    var index = thisHeaderItem.index();
 
-    if (!thisHeader[0]) return;
+    if (!thisHeaderItem[0]) return;
 
-    // 不可关闭项
-    if (thisHeader.attr('lay-unclosed')) return;
+    // 标签是否不可关闭
+    if (thisHeaderItem.attr('lay-closable') === 'false') {
+      return;
+    }
 
-    // 如果关闭的是当前标签，则更换当前标签下标
-    if (thisHeader.hasClass(component.CONST.CLASS_THIS)) {
-      if (thisHeader.next()[0]) {
-        that.change(thisHeader.next());
-      } else if(thisHeader.prev()[0]) {
-        that.change(thisHeader.prev());
+     // 当前标签相关数据
+     var params = that.data();
+
+    // 标签关闭前的事件。若非强制关闭，可则根据事件的返回结果决定是否关闭
+    if (!force) {
+      var closable = layui.event.call(
+        thisHeaderItem[0],
+        component.CONST.MOD_NAME,
+        'beforeClose('+ options.id +')',
+        $.extend(params, {
+          index: thisHeaderItem.index()
+        })
+      );
+
+      // 是否阻止关闭
+      if (closable === false) {
+        return;
+      }
+    }
+
+    // 如果关闭的是当前标签，则更换当前标签索引
+    if (thisHeaderItem.hasClass(component.CONST.CLASS_THIS)) {
+      if (thisHeaderItem.next()[0]) {
+        that.change(thisHeaderItem.next(), true);
+      } else if(thisHeaderItem.prev()[0]) {
+        that.change(thisHeaderItem.prev(), true);
       }
     }
 
     // 移除元素
-    thisHeader.remove();
+    thisHeaderItem.remove();
     that.findBodyItem(index).remove();
 
     that.roll('auto', index);
 
-    // 回调
+    // 获取当前标签相关数据
     var params = that.data();
-    typeof options.close === 'function' && options.close(params);
-    layui.event.call(params.thisHeader[0], component.CONST.MOD_NAME, 'close('+ options.id +')', params); // 事件
+
+    // 标签关闭后的事件
+    layui.event.call(
+      params.thisHeaderItem[0],
+      component.CONST.MOD_NAME,
+      'afterClose('+ options.id +')',
+      params
+    );
   };
 
-  // 批量关闭标签
-  Class.prototype.closeMore = function(type, index) {
+  /**
+   * 批量关闭标签
+   * @see tabs.close
+   */
+  Class.prototype.closeMult = function(mode, index) {
     var that = this;
     var options = that.config;
-    var elemItem = that.elemItem();
+    var container = that.getContainer();
     var data = that.data();
-    var headers = elemItem.header.items;
-    var bodys = elemItem.body.items;
-    var FILTER = ':not([lay-unclosed])';
+    var headers = container.header.items;
+    var bodys = container.body.items;
+    var DISABLED_CLOSE_SELECTOR = '[lay-closable="false"]'; // 不可关闭标签选择器
+    var FILTER = ':not('+ DISABLED_CLOSE_SELECTOR +')'; // 不可关闭标签过滤器
 
     index = index === undefined ? data.index : index;
 
-    // 遍历
-    headers.each(function(i){
+    // 将标签头 lay-closable 属性值同步到 body 项
+    headers.each(function(i) {
       var othis = $(this);
-      var unclosed = othis.attr('lay-unclosed');
-
-      // 标注不可关闭项
-      if (unclosed) {
-        bodys.eq(i).attr('lay-unclosed', unclosed);
+      var closableAttr = othis.attr('lay-closable');
+      if (closableAttr) {
+        bodys.eq(i).attr('lay-closable', closableAttr);
       }
     });
 
-    // 移交当前标签项
-    if (!data.thisHeader.attr('lay-unclosed')) {
-      if(type === 'all' || !type){
-        var nextHeader = headers.filter(':gt('+ data.index +')[lay-unclosed]').eq(0);
-        var prevHeader = $(headers.filter(':lt('+ data.index +')[lay-unclosed]').get().reverse()).eq(0);
+    // 若当前选中标签也允许关闭，则尝试寻找不可关闭的标签并将其选中
+    if (data.thisHeaderItem.attr('lay-closable') !== 'false') {
+      if(mode === 'all' || !mode){
+        var nextHeader = headers.filter(':gt('+ data.index +')'+ DISABLED_CLOSE_SELECTOR).eq(0);
+        var prevHeader = $(headers.filter(':lt('+ data.index +')'+ DISABLED_CLOSE_SELECTOR).get().reverse()).eq(0);
         if (nextHeader[0]) {
-          that.change(nextHeader);
+          that.change(nextHeader, true);
         } else if(prevHeader[0]) {
-          that.change(prevHeader);
+          that.change(prevHeader, true);
         }
-      } else if(index !== data.index) {
-        that.change(that.findHeaderItem(index));
+      } else if(index !== data.index) { // 自动切换到活动标签（功能可取消）
+        that.change(that.findHeaderItem(index), true);
       }
     }
 
     // 执行批量关闭标签
-    if (type === 'other') { // 关闭其他标签
+    if (mode === 'other') { // 关闭其他标签
       headers.eq(index).siblings(FILTER).remove();
       bodys.eq(index).siblings(FILTER).remove();
-    } else if(type === 'right') { // 关闭右侧标签
+    } else if(mode === 'right') { // 关闭右侧标签
       headers.filter(':gt('+ index +')'+ FILTER).remove();
       bodys.filter(':gt('+ index +')'+ FILTER).remove();
     } else { // 关闭所有标签
@@ -281,120 +328,191 @@ layui.define('component', function(exports) {
       bodys.filter(FILTER).remove();
     }
 
+    that.roll('auto');
+
     // 回调
     var params = that.data();
-    typeof options.close === 'function' && options.close(params);
-    layui.event.call(params.thisHeader[0], component.CONST.MOD_NAME, 'close('+ options.id +')', params); // 事件
+
+    // 标签关闭后的事件
+    layui.event.call(
+      params.thisHeaderItem[0],
+      component.CONST.MOD_NAME,
+      'afterClose('+ options.id +')',
+      params
+    );
   };
 
-  // 切换标签
-  Class.prototype.change = function(thisHeader) {
-    if (!thisHeader || !thisHeader[0]) return;
+  /**
+   * 切换标签
+   * @param {Object} thisHeaderItem - 当前标签头部项元素
+   * @param {boolean} [force=false] - 是否强制切换
+   * @returns
+   */
+  Class.prototype.change = function(thisHeaderItem, force) {
+    if (!thisHeaderItem || !thisHeaderItem[0]) return;
 
     var that = this;
     var options = that.config;
-    var index = thisHeader.index();
-    var thatA = thisHeader.find('a');
-    var isLink = typeof thatA.attr('href') === 'string' && thatA.attr('target') === '_blank'; // 是否存在跳转链接
-    var unselect = typeof thisHeader.attr('lay-unselect') === 'string'; // 是否禁用选中
+    var index = thisHeaderItem.index();
+    var thatA = thisHeaderItem.find('a');
+    // 是否存在跳转链接
+    var isLink = typeof thatA.attr('href') === 'string' && thatA.attr('target') === '_blank';
+    // 是否不允许选中
+    var unselect = typeof thisHeaderItem.attr('lay-unselect') === 'string';
 
-    // 执行切换
-    if (!(isLink || unselect)) {
-      // 头部
-      thisHeader.addClass(component.CONST.CLASS_THIS).siblings()
-      .removeClass(component.CONST.CLASS_THIS);
-      // 内容
-      that.findBodyItem(index).addClass(component.CONST.CLASS_SHOW)
-      .siblings().removeClass(component.CONST.CLASS_SHOW);
+    // 不满足切换的条件
+    if (isLink || unselect) {
+      return;
     }
 
+    // 当前标签相关数据
+    var params = that.data();
+
+    // 标签关闭前的事件。若非强制关闭，可则根据事件的返回结果决定是否关闭
+    if (!force) {
+      var enable = layui.event.call(
+        thisHeaderItem[0],
+        component.CONST.MOD_NAME,
+        'beforeChange('+ options.id +')',
+        $.extend(params, {
+          from: {
+            index: params.index,
+            headerItem: params.thisHeaderItem
+          },
+          to: {
+            index: thisHeaderItem.index(),
+            headerItem: thisHeaderItem
+          }
+        })
+      );
+
+      // 是否阻止切换
+      if (enable === false) {
+        return;
+      }
+    }
+
+    // 执行标签头部切换
+    thisHeaderItem.addClass(component.CONST.CLASS_THIS).siblings()
+    .removeClass(component.CONST.CLASS_THIS);
+
+    // 执行标签内容切换
+    that.findBodyItem(index).addClass(component.CONST.CLASS_SHOW)
+    .siblings().removeClass(component.CONST.CLASS_SHOW);
+
     that.roll('auto', index);
 
-    // 回调
+    // 重新获取标签相关数据
     var params = that.data();
-    typeof options.change === 'function' && options.change(params);
-    layui.event.call(thisHeader[0], component.CONST.MOD_NAME, 'change('+ options.id +')', params); // 事件
+
+    // 标签切换后的事件
+    layui.event.call(
+      params.thisHeaderItem[0],
+      component.CONST.MOD_NAME,
+      'afterChange('+ options.id +')',
+      params
+    );
   };
 
-  // 渲染标签头部项
-  Class.prototype.renderHeaderItem = function(obj){
+  /**
+   * 渲染标签头部项
+   * @param {Object} opts - 标签项配置信息
+   */
+  Class.prototype.renderHeaderItem = function(opts) {
     var that = this;
     var options = that.config;
-    var elemItem = $(obj.headerItem || options.headerItem || '<li></li>');
+    var headerItem = $(opts.headerItem || options.headerItem || '<li></li>');
 
-    elemItem.html(obj.title || 'New Tab');
+    headerItem.html(opts.title || 'New Tab');
 
     // 追加属性
-    layui.each(obj, function(key, value){
+    layui.each(opts, function(key, value){
       if(/^(title|content|mode|done)$/.test(key)) return;
-      elemItem.attr('lay-'+ key, value);
+      headerItem.attr('lay-'+ key, value);
     });
 
     // 追加标签关闭元素
-    that.appendClose(elemItem, obj);
+    that.appendClose(headerItem, opts);
 
-    return elemItem;
+    return headerItem;
   };
 
-  // 渲染标签内容项
-  Class.prototype.renderBodyItem = function(obj) {
+  /**
+   * 渲染标签内容项
+   * @param {Object} opts - 标签项配置信息
+   */
+  Class.prototype.renderBodyItem = function(opts) {
     var that = this
     var options = that.config
-    var elemItem = $(obj.bodyItem || options.bodyItem || '<div class="'+ component.CONST.ITEM +'"></div>');
+    var bodyItem = $(opts.bodyItem || options.bodyItem || '<div class="'+ component.CONST.ITEM +'"></div>');
 
-    elemItem.html(obj.content || '');
-    return elemItem;
+    bodyItem.html(opts.content || '');
+    return bodyItem;
   };
 
-  // 给某一个标签项追加可关闭元素
-  Class.prototype.appendClose = function(othis, obj) {
+  /**
+   * 给某一个标签项追加可关闭元素
+   * @param {Object} headerItem - 标签项元素
+   * @param {Object} opts - 标签项配置信息
+   */
+  Class.prototype.appendClose = function(headerItem, opts) {
     var that = this
     var options = that.config;
 
     if(!options.closable) return;
 
-    obj = obj || {};
-    if (obj.unclosed || othis.attr('lay-unclosed')) return; // 不可关闭项
+    opts = opts || {};
 
-    if (!othis.find('.'+ component.CONST.CLOSE)[0]) {
+    // 不可关闭项
+    if (opts.closable === 'false' || headerItem.attr('lay-closable') === 'false') {
+      return;
+    }
+
+    // 可关闭项追加关闭按钮
+    if (!headerItem.find('.'+ component.CONST.CLOSE)[0]) {
       var close = $('<i class="layui-icon layui-icon-close layui-unselect '+ component.CONST.CLOSE +'"></i>');
       close.on('click', function(){
         that.close($(this).parent());
         return false;
       });
-      othis.append(close);
+      headerItem.append(close);
     }
   };
 
   // 渲染标签可关闭元素
-  Class.prototype.renderClose = function(othis) {
+  Class.prototype.renderClose = function() {
     var that = this;
     var options = that.config;
-    var elemItem = that.elemItem();
+    var container = that.getContainer();
     var hasDel = that.cache('close');
 
     // 是否开启关闭
     if (options.closable) {
       if (!hasDel) {
-        elemItem.header.items.each(function(){
+        container.header.items.each(function(){
           that.appendClose($(this));
         });
         that.cache('close', true);
       }
     } else if(hasDel) {
-      elemItem.header.items.each(function() {
+      container.header.items.each(function() {
         $(this).find('.'+ component.CONST.CLOSE).remove();
       });
     }
   };
 
-  // 滚动标签
-  Class.prototype.roll = function(type, index) {
+  /**
+   * 标签头滚动
+   * @param {('auto'|'prev'|'next'|'init')} [mode='next'] - 滚动方式
+   * @param {number} index - 标签索引。默认取当前选中标签的索引值
+   * @returns
+   */
+  Class.prototype.roll = function(mode, index) {
     var that = this;
     var options = that.config;
-    var elemItem = that.elemItem();
-    var headerElem = elemItem.header.elem;
-    var headerItems = elemItem.header.items;
+    var container = that.getContainer();
+    var headerElem = container.header.elem;
+    var headerItems = container.header.items;
     var scrollWidth = headerElem.prop('scrollWidth'); // 实际总长度
     var outerWidth = Math.ceil(headerElem.outerWidth()); // 可视区域的长度
     var tabsLeft = headerElem.data('left') || 0;
@@ -418,7 +536,7 @@ layui.define('component', function(exports) {
       // 左侧临界值
       if (tabsLeft + countWidth < 0) {
         tabsLeft = countWidth >= 0 ? countWidth : 0; // 标签的复原位移不能超出 0
-        return headerElem.css('left', -tabsLeft).data('left', -tabsLeft);;
+        return headerElem.css('left', -tabsLeft).data('left', -tabsLeft);
       }
 
       // 当选中标签溢出在可视区域「右侧」时，
@@ -478,7 +596,8 @@ layui.define('component', function(exports) {
       }
     }
 
-    if (type === 'init') return;
+    // 初始化滚动模式
+    if (mode === 'init') return;
 
     // 重新获取
     scrollWidth = headerElem.prop('scrollWidth') // 实际总长度
@@ -486,7 +605,7 @@ layui.define('component', function(exports) {
     elemScroll = headerElem.parent('.'+ CLASS_SCROLL);
 
     // 左箭头（往右滚动）
-    if (type === 'prev') {
+    if (mode === 'prev') {
       // 当前的 left 减去可视宽度，用于与上一轮的页签比较
       var  prevLeft = -tabsLeft - outerWidth;
       if(prevLeft < 0) prevLeft = 0;
@@ -499,9 +618,9 @@ layui.define('component', function(exports) {
           return false;
         }
       });
-    } else if(type === 'auto') { // 自动识别滚动
+    } else if(mode === 'auto') { // 自动识别滚动
       rollToVisibleArea();
-    } else { // 右箭头（往左滚动）
+    } else { // 右箭头（往左滚动） 默认 next
       headerItems.each(function(i, item){
         var li = $(item);
         var left = Math.ceil(li.position().left);
@@ -528,96 +647,101 @@ layui.define('component', function(exports) {
     ](component.CONST.CLASS_DISABLED);
   };
 
-  // 根据 id 或 index 获取相关标签头部项
+  /**
+   * 根据 id 或 index 获取相关标签头部项
+   * @param {number|string} index - 标签索引或 id
+   */
   Class.prototype.findHeaderItem = function(index) {
     if(!(
       typeof index === 'number'
       || (typeof index === 'string' && index)
     )) return;
-    var headerItems = this.elemItem().header.items;
+    var headerItems = this.getContainer().header.items;
     var item = headerItems.filter('[lay-id="'+ index +'"]');
     return item[0] ? item : headerItems.eq(index);
   };
 
-  // 根据 index 获取相关标签内容项
+  /**
+   * 根据 index 获取相关标签内容项
+   * @param {number} index - 标签索引
+   */
   Class.prototype.findBodyItem = function(index) {
-    return this.elemItem().body.items.eq(index);
+    return this.getContainer().body.items.eq(index);
   };
 
-  // 返回给回调的公共信息
+  /**
+   * 返回给回调的公共信息
+   * @returns
+   */
   Class.prototype.data = function() {
     var that = this;
     var options = that.config;
-    var elemItem = that.elemItem();
-    var thisHeader = elemItem.header.items.filter('.'+ component.CONST.CLASS_THIS);
-    var index = thisHeader.index();
+    var container = that.getContainer();
+    var thisHeaderItem = container.header.items.filter('.'+ component.CONST.CLASS_THIS);
+    var index = thisHeaderItem.index();
 
     return {
       options: options, // 标签配置信息
-      elemItem: elemItem,
-      thisHeader: thisHeader, // 当前标签头部项
-      thisBody: that.findBodyItem(index), // 当前标签内容项
-      index: index, // 当前标签下标
-      length: elemItem.header.items.length // 当前标签数
+      container: container, // 标签容器的相关元素
+      thisHeaderItem: thisHeaderItem, // 当前标签头部项
+      thisBodyItem: that.findBodyItem(index), // 当前标签内容项
+      index: index, // 当前标签索引
+      length: container.header.items.length // 当前标签数
     }
   };
 
   // 扩展组件接口
   $.extend(component, {
     /**
-     * 增加标签
-     * @param {string} id - 标签 ID
-     * @param {object} obj - 标签配置信息
-     * @returns
+     * 添加标签
+     * @param {string} id - 渲染时的实例 ID
+     * @param {Object} opts - 添加标签的配置项，详见 Class.prototype.add
      */
-    add: function(id, obj) {
+    add: function(id, opts) {
       var that = component.getThis(id);
-      if(!that) return this;
-      that.add(obj);
+      if(!that) return;
+      that.add(opts);
     },
 
     /**
      * 关闭标签
-     * @param {string} id - 标签 ID
-     * @param {number} index - 标签下标
-     * @returns
+     * @param {string} id - 渲染时的实例 ID
+     * @param {number} index - 标签索引
+     * @param {boolean} [force=false] - 是否强制关闭
      */
-    close: function(id, index) {
+    close: function(id, index, force) {
       var that = component.getThis(id);
-      if(!that) return this;
+      if(!that) return;
       if(index === undefined) index = that.data().index; // index 若不传，则表示关闭当前标签
-      that.close(that.findHeaderItem(index));
+      that.close(that.findHeaderItem(index), force);
     },
 
     /**
      * 关闭多个标签
-     * @param {string} id - 标签 ID
-     * @param {string} type - 关闭类型，可选值：left、right、other、all
-     * @param {number} index - 标签下标。若传入，则按 index 所在标签为事件执行关闭操作
-     * @returns
+     * @param {string} id - 渲染时的实例 ID
+     * @param {('other'|'right'|'all')} [mode="all"] - 关闭方式
+     * @param {number} index - 活动标签的索引，默认取当前选中标签的索引。一般用于标签右键事件
      */
-    closeMore: function(id, type, index) {
+    closeMult: function(id, mode, index, force) {
       var that = component.getThis(id);
-      if(!that) return this;
-      that.closeMore(type, index);
+      if(!that) return;
+      that.closeMult(mode, index, force);
     },
 
     /**
      * 切换标签
-     * @param {string} id - 标签 ID
-     * @param {number} index - 标签下标
-     * @returns
+     * @param {string} id - 渲染时的实例 ID
+     * @param {number} index - 标签索引
      */
-    change: function(id, index) {
+    change: function(id, index, force) {
       var that = component.getThis(id);
-      if(!that) return this;
-      that.change(that.findHeaderItem(index));
+      if(!that) return;
+      that.change(that.findHeaderItem(index), force);
     },
 
     /**
      * 获取标签信息
-     * @param {string} id - 标签 ID
-     * @returns
+     * @param {string} id - 渲染时的实例 ID
      */
     data: function(id) {
       var that = component.getThis(id);
@@ -626,34 +750,35 @@ layui.define('component', function(exports) {
 
     /**
      * 获取标签指定头部项
-     * @param {string} id - 标签 ID
-     * @param {number} index - 标签下标
+     * @param {string} id - 渲染时的实例 ID
+     * @param {number} index - 标签索引
      * @returns
      */
-    headerItem: function(id, index) {
+    getHeaderItem: function(id, index) {
       var that = component.getThis(id);
-      return that ? that.findHeaderItem(index) : this;
+      if(!that) return;
+      return that.findHeaderItem(index);
     },
 
     /**
      * 获取标签指定内容项
-     * @param {string} id - 标签 ID
-     * @param {number} index - 标签下标
+     * @param {string} id - 渲染时的实例 ID
+     * @param {number} index - 标签索引
      * @returns
      */
-    bodyItem: function(id, index) {
+    getBodyItem: function(id, index) {
       var that = component.getThis(id);
-      return that ? that.findBodyItem(index) : this;
+      if(!that) return;
+      return that.findBodyItem(index);
     },
 
     /**
-     * 调整视图结构
-     * @param {string} id - 标签 ID
-     * @returns
+     * 刷新标签视图结构
+     * @param {string} id - 渲染时的实例 ID
      */
-    setView: function(id) {
+    refresh: function(id) {
       var that = component.getThis(id);
-      if (!that) return this;
+      if (!that) return;
       that.roll('auto');
     }
   });
