[新增] tab 选项卡组件

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

@@ -0,0 +1,19 @@
+::: demo
+
+<template>
+  <lay-tab><div style="padding: 30px;">面板</div></lay-tab>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

docs/src/layouts/Layout.vue

@@ -85,7 +85,8 @@ export default {
       { id: 24, title: '字段',subTitle:"field" ,path: '/zh-CN/components/field' },
       { id: 25, title: '空',subTitle:"empty" ,path: '/zh-CN/components/empty' },
       { id: 26, title: '评分',subTitle:"rate" ,path: '/zh-CN/components/rate' },
-      { id: 27, title: '下拉', subTitle: "dropdown", path: '/zh-CN/components/dropdown'}
+      { id: 27, title: '下拉', subTitle: "dropdown", path: '/zh-CN/components/dropdown'},
+      { id: 28, title: '选项卡', subTitle: "tab", path: '/zh-CN/components/tab'}
     ]
 
     const selected = ref(1)

docs/src/router/zh-CN.ts

@@ -140,6 +140,10 @@ const zhCN = [
         path: '/zh-CN/components/dropdown',
         component: () => import('../../docs/zh-CN/components/dropdown.md'),
         meta: { title: '下拉' },
+      },{
+        path: '/zh-CN/components/tab',
+        component: () => import('../../docs/zh-CN/components/tab.md'),
+        meta: { title: '选项卡' },
       }
     ],
   },

src/index.ts

@@ -46,6 +46,8 @@ import LayEmpty from './module/empty/index'
 import LayFormItem from './module/formItem/index'
 import LayRate from './module/rate/index'
 import LayDropdown from './module/dropdown/index'
+import LayTab from './module/tab/index'
+import LayTabItem from './module/tabItem/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -90,7 +92,9 @@ const components: Record<string, IDefineComponent> = {
   LayEmpty,
   LayFormItem,
   LayRate,
-  LayDropdown
+  LayDropdown,
+  LayTab,
+  LayTabItem
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -149,6 +153,8 @@ export {
   LayFormItem,
   LayRate,
   LayDropdown,
+  LayTab,
+  LayTabItem,
   install,
 }
 

src/module/tab/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 || 'LayTab', Component)
+}
+
+export default Component as IDefineComponent

src/module/tab/index.vue

@@ -0,0 +1,25 @@
+<template>
+<div class="layui-tab">
+  <ul class="layui-tab-title">
+    <li class="layui-this">网站设置</li>
+    <li>用户管理</li>
+    <li>权限分配</li>
+    <li>商品管理</li>
+    <li>订单管理</li>
+  </ul>
+  <div class="layui-tab-content">
+    <div class="layui-tab-item layui-show">
+      1. 高度默认自适应，也可以随意固宽。
+      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
+    </div>
+    <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">
+
+</script>

src/module/tabItem/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 || 'LayTabItem', Component)
+}
+
+export default Component as IDefineComponent

src/module/tabItem/index.vue

@@ -0,0 +1,6 @@
+<template>
+</template>
+
+<script setup name="LayTabItem" lang="ts">
+
+</script>