4dkankan-components/packages/components/basic/group/ui-group-option.vue

<template>
    <div class="group-option">
        <span v-if="props.label" class="group-option-label">
            {{ props.label }}
        </span>
        <slot />
    </div>
</template>

<script setup>
import { getCurrentInstance, inject, onBeforeMount, onUnmounted } from 'vue'
import { Relation } from './constant'
const props = defineProps({
    label: String,
})

const brotherInstances = inject(Relation)
const instance = getCurrentInstance()

if (brotherInstances.value) {
    onBeforeMount(() => (brotherInstances.value = [...brotherInstances.value, instance]))
    onUnmounted(() => {
        const index = brotherInstances.value.indexOf(instance)
        if (~index) {
            brotherInstances.value.splice(index, 1)
            brotherInstances.value = [...brotherInstances.value]
        }
    })
}
</script>

<script>
export default { name: 'UiGroupOption' }
</script>