[新增] tab 选项卡组件

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

@@ -1,7 +1,10 @@
 ::: demo
 
 <template>
-  <lay-tab></lay-tab>
+  <lay-tab v-model="current1">
+    <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>
 </template>
 
 <script>
@@ -10,7 +13,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const current1 = ref("1")
+
     return {
+      current1
     }
   }
 }
@@ -21,7 +27,10 @@ export default {
 ::: demo
 
 <template>
-  <lay-tab type="brief"></lay-tab>
+  <lay-tab type="brief" v-model="current2">
+    <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>
 </template>
 
 <script>
@@ -30,7 +39,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const current2 = ref("1")
+
     return {
+      current2
     }
   }
 }
@@ -41,7 +53,10 @@ export default {
 ::: demo
 
 <template>
-  <lay-tab type="card"></lay-tab>
+  <lay-tab type="card" v-model="current3">
+    <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>
 </template>
 
 <script>
@@ -50,7 +65,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
+    const current3 = ref("1")
+
     return {
+      current3
     }
   }
 }

src/module/tab/index.vue

@@ -1,27 +1,43 @@
 <template>
-  <div class="layui-tab" :class="[type?'layui-tab-' + type:'']">
+  <div class="layui-tab" :class="[type ? 'layui-tab-' + type : '']">
     <ul class="layui-tab-title">
-      <li class="layui-this">网站设置</li>
+      <li
-      <li>用户管理</li>
+        @click="change(ss.props.id)"
-      <li>权限分配</li>
+        v-for="ss in slots"
-      <li>商品管理</li>
+        :key="ss"
-      <li>订单管理</li>
+        :class="[ss.props.id === modelValue ? 'layui-this' : '']"
+      >
+        {{ ss.props.title }}
+      </li>
     </ul>
     <div class="layui-tab-content">
-      <div class="layui-tab-item layui-show"> 内容1 </div>
+      <slot></slot>
-      <div class="layui-tab-item"> 内容2 </div>
-      <div class="layui-tab-item"> 内容3 </div>
-      <div class="layui-tab-item"> 内容4 </div>
-      <div class="layui-tab-item"> 内容5 </div>
     </div>
   </div>
 </template>
 
 <script setup name="LayTab" lang="ts">
-import { defineProps, withDefaults } from 'vue'
+import { defineProps, inject, provide, ref, useSlots } from 'vue'
+
+const slot = useSlots() as any
+const slots = slot.default && slot.default()
 
 const props =
   defineProps<{
     type?: string
+    modelValue?: string
   }>()
+
+// select update 时, 通知 change 事件
+const emit = defineEmits(['update:modelValue'])
+
+const active = ref(props.modelValue)
+
+const change = function (id: any) {
+  emit('update:modelValue', id)
+  active.value = id
+}
+
+
+provide("active",active)
 </script>

src/module/tabItem/index.vue

@@ -1,9 +1,16 @@
 <template>
-    <div class="layui-tab-item">
+    <div class="layui-tab-item" :class="[active === id?'layui-show':'']">
         <slot></slot>
     </div>
 </template>
 
 <script setup name="LayTabItem" lang="ts">
+import { defineProps, inject, useSlots } from 'vue'
 
+const props =
+  defineProps<{
+    id?: string
+  }>()
+
+const active = inject("active")
 </script>