4dkankan-components/packages/components/basic/gate/layer.vue

<template>
    <div
        class="ui-gate-layer"
        :style="{
            height: normalizeUnitToStyle(height),
            '--len': contentInstances.length,
            '--current': slideIndex,
        }"
    >
        <div class="ui-gate-slides">
            <slot />
        </div>
    </div>
</template>

<script setup>
// watchEffect
import { computed, defineProps, provide, ref, watch } from 'vue'
import { normalizeUnitToStyle } from '@kankan/utils'
import { Relation } from './constant'

const contentInstances = ref([])
const props = defineProps({
    index: {
        type: [Number, String],
        default: 0,
    },
    height: {
        type: [Number, String],
    },
})

const slideIndex = computed(() => (props.index > contentInstances.value.length - 1 ? contentInstances.value.length - 1 : props.index < 0 ? 0 : props.index))

watch([contentInstances, slideIndex], () => {
    for (let i = 0; i < contentInstances.value.length; i++) {
        const instance = contentInstances.value[i]
        instance.value = i === slideIndex.value
    }
})

provide(Relation, contentInstances)
</script>

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