feat(tab): 新增 allowClose 属性, change close 事件

src/module/carousel/index.vue

@@ -1,13 +1,12 @@
 <template>
   <div
     class="layui-carousel"
-    id="test1"
-    lay-anim=""
+    lay-anim
     lay-indicator="inside"
     lay-arrow="always"
-    style="width: 100%; height: 280px"
+    :style="{width:width,height:height}"
   >
-    <div carousel-item="">
+    <div carousel-item>
       <div> </div>
       <div> </div>
       <div> </div>
@@ -28,4 +27,16 @@
   </div>
 </template>
 <script setup name="LayCarousel" lang="ts">
+import { withDefaults, defineProps } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    width: string,
+    height: string
+  }>(),
+  {
+    width: '100%',
+    height: '280px'
+  }
+)
 </script>

src/module/carouselItem/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+  app.component(Component.name || 'LayCarouselItem', Component)
+}
+
+export default Component as IDefineComponent

src/module/carouselItem/index.vue

@@ -0,0 +1,9 @@
+<template>
+    <li class="layui-this">
+        <slot></slot>
+    </li>
+</template>
+<script setup name="LayCarousel" lang="ts">
+import { withDefaults, defineProps } from 'vue'
+
+</script>

src/module/checkboxGroup/index.vue

@@ -1,5 +1,5 @@
 <template>
-
+    <div class="layui-checkbox-group"></div>
 </template>
 
 <script setup name="LayCheckbox" lang="ts">

src/module/tab/index.vue

@@ -5,9 +5,10 @@
         v-for="ss in slots"
         :key="ss"
         :class="[ss.props.id === modelValue ? 'layui-this' : '']"
-        @click="change(ss.props.id)"
+        @click.stop="change(ss.props.id)"
       >
         {{ ss.props.title }}
+        <i @click.stop="close(ss.props.id)"  v-if="allowClose" class="layui-icon layui-icon-close layui-unselect layui-tab-close"></i>
       </li>
     </ul>
     <div class="layui-tab-content">
@@ -17,7 +18,7 @@
 </template>
 
 <script setup name="LayTab" lang="ts">
-import { defineProps, inject, provide, ref, useSlots } from 'vue'
+import { defineProps, provide, ref, useSlots } from 'vue'
 
 const slot = useSlots() as any
 const slots = slot.default && slot.default()
@@ -25,17 +26,23 @@ const slots = slot.default && slot.default()
 const props = defineProps<{
   type?: string
   modelValue: string
+  allowClose?: boolean
 }>()
 
 // select update 时, 通知 change 事件
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue','change','close'])
 
 const active = ref(props.modelValue)
 
 const change = function (id: any) {
   emit('update:modelValue', id)
+  emit('change', id)
   active.value = id
 }
 
+const close = function(id: any) {
+  emit('close', id)
+}
+
 provide('active', active)
 </script>