From c8004afc33932f5aeb5f572e517c176881fa19ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 18 Jan 2022 01:28:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20=E9=80=89=E9=A1=B9?=
 =?UTF-8?q?=E5=8D=A1=20closable=20=E4=B8=8D=E5=8F=AF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/tab.md  | 47 +++++++++++++++++----------
 example/docs/zh-CN/guide/changelog.md |  1 +
 src/module/tab/index.vue              |  2 +-
 3 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/example/docs/zh-CN/components/tab.md b/example/docs/zh-CN/components/tab.md
index 07bce40a..c2100e3e 100644
--- a/example/docs/zh-CN/components/tab.md
+++ b/example/docs/zh-CN/components/tab.md
@@ -130,15 +130,15 @@ export default {
 
 :::
 
-::: title 控制是否关闭
+::: title 关闭前置
 :::
 
 ::: demo
 
 <template>
   <lay-tab type="card" v-model="current5" allow-close @change="change5" @close="close5" :beforeClose="beforeClose">
-    <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
-    <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
+    <lay-tab-item title="选项一" id="1" closable="true"><div style="padding:20px">选项一</div></lay-tab-item>
+    <lay-tab-item title="选项二" id="2" closable="false"><div style="padding:20px">选项二</div></lay-tab-item>
     <lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
     <lay-tab-item title="选项四" id="4"><div style="padding:20px">选项四</div></lay-tab-item>
     <lay-tab-item title="选项五" id="5"><div style="padding:20px">选项五</div></lay-tab-item>
@@ -178,15 +178,14 @@ export default {
 
 :::
 
-
 ::: title 嵌套循环
 :::
 
 ::: demo
 
 <template>
-  <lay-tab type="card" v-model="current6" @change="change6">
-    <lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id">
+  <lay-tab type="card" allow-close v-model="current6" @change="change6">
+    <lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id" :closable="a.closable">
       内容{{a.id}}
     </lay-tab-item>
   </lay-tab>
@@ -204,12 +203,11 @@ export default {
     }
 
     const arr = ref([
-      {id:'1', title:'选项一'},
-      {id:'2', title:'选项二'}
+      {id:'1', title:'选项一', closable: false},
+      {id:'2', title:'选项二'},
+      {id:'3', title:'选项三'}
     ])
 
-    arr.value.push({id:'3', title:'选项三'})
-
     return {
       current6,
       arr
@@ -225,13 +223,13 @@ export default {
 
 ::: table
 
-| 属性        | 描述     | 可选值         |
-| ----------- | -------- | -------------- |
-| v-model     | 当前激活 | --             |
-| type        | 主题样式 | --             |
-| allow-close | 允许关闭 | `true` `false` |
-| before-close  | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭   |
-| before-leave  | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换   |
+| 属性         | 描述                                 | 可选值                                    |
+| ------------ | ------------------------------------ | ----------------------------------------- |
+| v-model      | 当前激活                             | --                                        |
+| type         | 主题样式                             | --                                        |
+| allow-close  | 允许关闭                             | `true` `false`                            |
+| before-close | `Function`关闭之前的回调钩子函数     | 参数(`id`), `return false` 表示不进行关闭 |
+| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
 
 :::
 
@@ -247,8 +245,21 @@ export default {
 
 :::
 
+::: title Tab Item 属性
+:::
+
+::: table
+
+| 属性     | 描述     | 可选值 |
+| -------- | -------- | ------ |
+| id       | 唯一标识 | --     |
+| title    | 头部标题 | --     |
+| closable | 允许关闭 | --     |
+
+:::
+
 ::: comment
 :::
 
 ::: previousNext tab
-:::
\ No newline at end of file
+:::
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index fc80759b..0e38f21a 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -17,6 +17,7 @@
         <h3>0.3.4 <span class="layui-badge-rim">2022-01-09</span></h3> 
         <ul> 
           <li>[新增] avatar-list 头像列表组件。</li>
+          <li>[新增] tab-item 选项卡组件 closable 属性, 控制当前选项卡 close 支持。</li>
           <li>[修复] button 按钮 disabled 为 true 时, 触发 click 事件。</li>
           <li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li> 
           <li>[升级] vite 2.7.12。</li>        
diff --git a/src/module/tab/index.vue b/src/module/tab/index.vue
index 033997d6..3b5d053a 100644
--- a/src/module/tab/index.vue
+++ b/src/module/tab/index.vue
@@ -13,7 +13,7 @@
       >
         {{ children.props.title }}
         <i
-          v-if="allowClose"
+          v-if="allowClose && children.props.closable != false"
           class="layui-icon layui-icon-close layui-unselect layui-tab-close"
           @click.stop="close(index, children.props.id)"
         ></i>