From 7ecca2a5e7a9c9ae811b68dc98e05c689b18aca6 Mon Sep 17 00:00:00 2001
From: schangxiang@126.com <schangxiang@126.com>
Date: 周日, 04 5月 2025 15:41:43 +0800
Subject: [PATCH] 222
---
HIAWms/web/src/components/Tab/Tab.tsx | 77 ++++++++++++++++++++++++++++++++++++++
1 files changed, 77 insertions(+), 0 deletions(-)
diff --git a/HIAWms/web/src/components/Tab/Tab.tsx b/HIAWms/web/src/components/Tab/Tab.tsx
new file mode 100644
index 0000000..ed3d59f
--- /dev/null
+++ b/HIAWms/web/src/components/Tab/Tab.tsx
@@ -0,0 +1,77 @@
+import { computed, defineComponent, ref, onMounted, PropType } from 'vue'
+import styles from './Tab.module.scss'
+import TabPane from './TabPane'
+import get from 'lodash/get'
+import type { TabsPaneContext } from 'element-plus'
+
+export default defineComponent({
+ name: 'Tab',
+ emits: ['tab', 'update:active'],
+ props: {
+ data: {
+ type: Array as PropType<any[]>,
+ default: [] as any[],
+ },
+ size: {
+ type: String,
+ default: '',
+ },
+ active: {
+ type: [String, Number],
+ default: '',
+ },
+ type: {
+ type: String,
+ default: 'list',
+ },
+ },
+ setup(props, ctx) {
+ const clN = {
+ list: styles.csTabs,
+ }
+ const active = computed({
+ get() {
+ return props.active || props.data[0]?.name || '1'
+ },
+ set(val: string) {
+ ctx.emit('update:active', val)
+ },
+ })
+ const handleClick = (tab: TabsPaneContext, event: Event) => {
+ ctx.emit('tab', tab.paneName)
+ }
+
+ const data = computed(() => {
+ return (
+ props.data.filter((item) => {
+ return !item.hidden
+ }) || []
+ )
+ })
+
+ return () => {
+ const className = clN[props.type] || styles.csDefaultTabs
+ return (
+ <el-tabs
+ class={{
+ [styles['--small']]: props.size === 'small',
+ [className]: true,
+ }}
+ model-value={active.value}
+ size={props.size}
+ onTabClick={handleClick}
+ >
+ {!ctx.slots.default
+ ? data.value.map((item: any, index) => {
+ return (
+ <TabPane {...item}>
+ <item.component />
+ </TabPane>
+ )
+ })
+ : ctx.slots.default?.()}
+ </el-tabs>
+ )
+ }
+ },
+})
--
Gitblit v1.9.3