feat(tab): 增强 tab 功能 (#1955)

* feat(tab): 增强 tab 功能

  1. lay-allowclose="false" 可以添加到 tab 容器或 tab title 元素上，遵循就近原则。
    - 添加到 tab 容器时，控制所有选项卡是否允许关闭，
   -  添加到 tab title 元素时，控制单个选项卡是否允许关闭。
   - tabAdd 参数新增 allowclose 选项，效果同 tab title 元素上的 lay-allowclose 属性

  2. 当 tab title 元素上有 lay-id 属性时，将根据 id 显示/删除对应的 content 元素，方便实现拖拽选项卡

  3. 新增 tabBeforeDelete 事件，返回 false 时阻止关闭对应的选项卡
 4. 因为 2，事件参数新增 id 属性

* refactor: 移除 title 和 content 同步 id，改为如果 content 中找不到 id, 就回退到默认行为

* docs(tab): 更新 tab 文档

* docs(tab): 优化文案

* style(tab): 避免某些分辨率下默认风格的当前选中标签头出现下边框的问题

* docs(tab): 优化文档及示例细节

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>

docs/tab/index.md

@@ -118,8 +118,8 @@ tab 组件提供了三种 UI 风格，分别为：
 
 | 属性 | 描述 |
 | --- | --- |
-| lay-allowclose | 是否开启删除图标。设置在 tab 容器 `<ul class="layui-tab">` 上。 |
-| lay-id | tab 选项唯一 ID，一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的 `<li>` 元素上 |
+| lay-allowclose | 是否开启删除图标。设置在 tab 容器 `<ul class="layui-tab">` 上。 <br><sup>2.9.11+</sup>: 若需要单独关闭某一个选项卡的删除图标，可在选项卡标题元素 `<li>` 上设置 `lay-allowclose="false"`|
+| lay-id | tab 选项唯一 ID，一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的 `<li>` 元素上。在外部附加选项卡拖拽排序时，`layui-tab-item` 元素也要设置 ID |
 
 <h3 id="allowclose" lay-toc="{level: 2}" class="ws-bold">开启删除</h3>
 
@@ -129,14 +129,14 @@ tab 组件提供了三种 UI 风格，分别为：
   <textarea>
 <div class="layui-tab" lay-allowclose="true">
   <ul class="layui-tab-title">
-    <li class="layui-this">标签1</li>
+    <li class="layui-this" lay-allowclose="false">标签1</li>
     <li>标签2</li>
     <li>标签3</li>
     <li>标签4</li>
     <li>标签5</li>
   </ul>
   <div class="layui-tab-content">
-    <div class="layui-tab-item layui-show">内容-1</div>
+    <div class="layui-tab-item layui-show">单独设置「标签1」不允许删除 <sup>2.9.11+</sup></div>
     <div class="layui-tab-item">内容-2</div>
     <div class="layui-tab-item">内容-3</div>
     <div class="layui-tab-item">内容-4</div>
@@ -191,6 +191,7 @@ layui.use(function(){
 | content | 选项卡的内容，支持传入 `html` | string | - |
 | id | 选项卡标题元素的 `lay-id` 属性值 | string | - |
 | change | 是否添加 tab 完毕后即自动切换 | boolean | `false` |
+| allowClose <sup>2.9.11+</sup>| 是否开启删除图标 | boolean | `false` |
 
 该方法用于添加 tab 选项。用法详见 : [#示例](#examples)
 
@@ -285,6 +286,7 @@ element.on('tab(filter)', function(data){
   console.log(this); // 当前 tab 标题所在的原始 DOM 元素
   console.log(data.index); // 得到当前 tab 项的所在下标
   console.log(data.elem); // 得到当前的 tab 容器
+  console.log(data.id); // 得到当前的 tab ID(2.9.11+)
 });
 ```
 
@@ -307,6 +309,31 @@ var element = layui.element;
 element.on('tabDelete(filter)', function(data){
   console.log(data.index); // 得到被删除的 tab 项的所在下标
   console.log(data.elem); // 得到当前的 tab 容器
+  console.log(data.id); // 得到被删除的 tab 项的 ID(2.9.11+)
+});
+```
+
+<h3 id="on-tabBeforeDelete" lay-toc="{level: 2}" class="ws-bold">tab 删除前的事件 <sup>2.9.11+</sup></h3>
+
+`element.on('tabBeforeDelete(filter)', callback);`
+
+- 参数 `tabBeforeDelete(filter)` 是一个特定结构。
+  - `tabBeforeDelete` 为 tab 删除事件固定值；
+  - `filter` 为 tab 容器属性 `lay-filter` 对应的值。
+- 参数 `callback` 为事件执行时的回调函数，并返回一个 `object` 类型的参数。
+
+点击 tab 选项删除前触发。
+
+```
+var element = layui.element;
+ 
+// tab 删除前的事件
+element.on('tabBeforeDelete(filter)', function(data){
+  console.log(data.index); // 得到被删除的 tab 项的所在下标
+  console.log(data.elem); // 得到当前的 tab 容器
+  console.log(data.id); // 得到被删除的 tab 项的 ID(2.9.11+)
+
+  if(data.id === 'home') return false; // 返回 false 时阻止关闭对应的选项卡
 });
 ```