/
tab-pane.vue
79 lines (70 loc) 路 1.64 KB
/
tab-pane.vue
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
77
78
79
<template>
<div
v-if="shouldBeRender"
v-show="active"
:id="`pane-${paneName}`"
:class="ns.b()"
role="tabpanel"
:aria-hidden="!active"
:aria-labelledby="`tab-${paneName}`"
>
<slot />
</div>
</template>
<script lang="ts" setup>
import {
computed,
getCurrentInstance,
inject,
onMounted,
onUnmounted,
reactive,
ref,
useSlots,
watch,
} from 'vue'
import { eagerComputed } from '@vueuse/core'
import { tabsRootContextKey } from '@element-plus/tokens'
import { throwError } from '@element-plus/utils'
import { useNamespace } from '@element-plus/hooks'
import { tabPaneProps } from './tab-pane'
const COMPONENT_NAME = 'ElTabPane'
defineOptions({
name: 'ElTabPane',
})
const props = defineProps(tabPaneProps)
const instance = getCurrentInstance()!
const slots = useSlots()
const tabsRoot = inject(tabsRootContextKey)
if (!tabsRoot)
throwError(COMPONENT_NAME, 'usage: <el-tabs><el-tab-pane /></el-tabs/>')
const ns = useNamespace('tab-pane')
const index = ref<string>()
const isClosable = computed(() => props.closable || tabsRoot.props.closable)
const active = eagerComputed(
() => tabsRoot.currentName.value === (props.name ?? index.value)
)
const loaded = ref(active.value)
const paneName = computed(() => props.name ?? index.value)
const shouldBeRender = eagerComputed(
() => !props.lazy || loaded.value || active.value
)
watch(active, (val) => {
if (val) loaded.value = true
})
const pane = reactive({
uid: instance.uid,
slots,
props,
paneName,
active,
index,
isClosable,
})
onMounted(() => {
tabsRoot.registerPane(pane)
})
onUnmounted(() => {
tabsRoot.unregisterPane(pane.uid)
})
</script>