mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-03 03:56:41 +08:00
40 lines
603 B
Vue
40 lines
603 B
Vue
<template>
|
|
<div class="tab-panel" :style="rootStyle">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'TabPanel',
|
|
}
|
|
</script>
|
|
|
|
<script setup>
|
|
import { computed, getCurrentInstance, ref } from 'vue'
|
|
|
|
const vm = getCurrentInstance()
|
|
vm.parent.exposed.tabs.value.push(vm)
|
|
|
|
defineProps({
|
|
// Tabs 会用到 label
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const active = ref(false)
|
|
const rootStyle = computed(() => ({
|
|
display: active.value ? 'block' : 'none',
|
|
}))
|
|
|
|
function changeActive(value) {
|
|
active.value = value
|
|
}
|
|
|
|
defineExpose({
|
|
changeActive,
|
|
})
|
|
</script>
|