1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| import { computed, defineComponent, ref, onMounted, PropType } from 'vue'
| import styles from './Tab.module.scss'
| import TabPane from './TabPane'
| 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>
| )
| }
| },
| })
|
|
