[完善]tab关闭和切换tab操作

example/docs/zh-CN/components/tab.md

@@ -94,6 +94,7 @@ export default {
   <lay-tab type="card" v-model="current4" :allow-close="allowClose" @change="change" @close="close">
     <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="3"><div style="padding:20px">选项三</div></lay-tab-item>
   </lay-tab>
 </template>
 
@@ -111,7 +112,7 @@ export default {
     }
 
     const close = function(id){
-      console.log("需要关闭:" + id)
+      console.log("当前关闭:" + id)
     }
 
     return {
@@ -126,14 +127,64 @@ export default {
 
 :::
 
+::: 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="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>
+  </lay-tab>
+  <div style="color:#ff5722;">id为单数的可以关闭</div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const current5 = ref("1")
+
+    const change5 = function(id){
+      console.log("当前值:" +id)
+    }
+
+    const beforeClose = function(id){
+      return parseInt(id) % 2 === 1;
+    }
+
+    const close5 = function(id){
+      console.log("当前关闭:" + id)
+    }
+
+    return {
+      current5,
+      change5,
+      beforeClose，
+      close5
+    }
+  }
+}
+</script>
+
+:::
+
+
 ::: title 嵌套循环
 :::
 
 ::: demo
 
 <template>
-  <lay-tab type="card" v-model="current5" @change="change5">
+  <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">
+      内容{{a.id}}
     </lay-tab-item>
   </lay-tab>
 </template>
@@ -144,8 +195,8 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const current5 = ref('1')
+    const current6 = ref('1')
-    const change5 = function(id){
+    const change6 = function(id){
       alert(id)
     }
 
@@ -157,7 +208,7 @@ export default {
     arr.value.push({id:'3', title:'选项三'})
 
     return {
-      current5,
+      current6,
       arr
     }
   }
@@ -176,6 +227,8 @@ export default {
 | v-model     | 当前激活 | --             |
 | type        | 主题样式 | --             |
 | allow-close | 允许关闭 | `true` `false` |
+| before-close  | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭   |
+| before-leave  | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换   |
 
 :::
 
@@ -186,7 +239,7 @@ export default {
 
 | 事件   | 描述     | 参数 |
 | ------ | -------- | ---- |
-| change | 选中切换 | --   |
+| change | 选中切换 | id   |
-| close  | 关闭事件 | --   |
+| close  | 关闭事件 | id   |
 
 :::

src/module/tab/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="layui-tab" :class="[type ? 'layui-tab-' + type : '']">
+  <div class="layui-tab" :class="[type ? 'layui-tab-' + type : '']" v-if="active">
     <ul class="layui-tab-title">
       <li
-        v-for="children in childrens"
+        v-for="(children, index) in childrens"
         :key="children"
         :class="[children.props.id === active ? 'layui-this' : '']"
         @click.stop="change(children.props.id)"
@@ -11,7 +11,7 @@
         <i
           v-if="allowClose"
           class="layui-icon layui-icon-close layui-unselect layui-tab-close"
-          @click.stop="close(children.props.id)"
+          @click.stop="close(index, children.props.id)"
         ></i>
       </li>
     </ul>
@@ -60,6 +60,8 @@ const props = defineProps<{
   type?: string
   modelValue: string
   allowClose?: boolean
+  beforeClose?: Function
+  beforeLeave?: Function
 }>()
 
 const emit = defineEmits(['update:modelValue', 'change', 'close'])
@@ -75,11 +77,27 @@ const active = computed({
 const slotsChange = ref(true)
 
 const change = function (id: any) {
+  // 回调切换标签之前的回调钩子函数，只要不是return false, 则进行切换该tab
+  if (props.beforeLeave && props.beforeLeave(id) === false) {
+    return ;
+  }
   emit('update:modelValue', id)
   emit('change', id)
 }
 
-const close = function (id: any) {
+const close = function (index : number, id: any) {
+  // 回调关闭之前的回调函数，只要不是return false, 则进行关闭该tab
+  if (props.beforeClose && props.beforeClose(id) === false) {
+    return ;
+  }
+
+  // 删除当前tab
+  childrens.value.splice(index, 1);
+  // 点击的是当前激活的tab，则需要切换到下一个tab
+  if (active.value === id) {
+    const nextChildren = childrens.value[(index === childrens.value.length ? 0 : index)];
+    change(nextChildren && nextChildren.props ? nextChildren.props.id : "")
+  }
   emit('close', id)
 }
 

src/module/tabItem/index.vue

@@ -11,11 +11,17 @@ export default {
 </script>
 
 <script setup name="LayTabItem" lang="ts">
-import { defineProps, inject, defineEmits, Ref } from 'vue'
+import { withDefaults, defineProps, inject, Ref } from 'vue'
 
-const props = defineProps<{
+const props = withDefaults(
-  id?: string
+  defineProps<{
-}>()
+    id: string
+    title: string
+    closable?: boolean
+  }>(),{
+    closable: true
+  }
+);
 
 const active = inject('active')
 const slotsChange: Ref<boolean> = inject('slotsChange') as Ref<boolean>