修复 选项卡 closable 不可用

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
@@ -226,7 +224,7 @@ export default {
 ::: table
 
 | 属性         | 描述                                 | 可选值                                    |
-| ----------- | -------- | -------------- |
+| ------------ | ------------------------------------ | ----------------------------------------- |
 | v-model      | 当前激活                             | --                                        |
 | type         | 主题样式                             | --                                        |
 | allow-close  | 允许关闭                             | `true` `false`                            |
@@ -247,6 +245,19 @@ export default {
 
 :::
 
+::: title Tab Item 属性
+:::
+
+::: table
+
+| 属性     | 描述     | 可选值 |
+| -------- | -------- | ------ |
+| id       | 唯一标识 | --     |
+| title    | 头部标题 | --     |
+| closable | 允许关闭 | --     |
+
+:::
+
 ::: comment
 :::
 

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>        

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>