4dkankan-components/packages/components/basic/slide/index.vue

<template>
    <div class="ui-slide">
        <Gate :index="index">
            <GateContent v-for="(item, i) in items" :key="i">
                <slot :raw="item" :active="items[index]"></slot>
            </GateContent>
        </Gate>
        <template v-if="showCtrl">
            <span class="left" @click="prevHandler" v-if="index !== 0"><UIIcon type="left" /></span>
            <span class="right" @click="nextHandler" v-if="index !== items.length - 1"><UIIcon type="pull-more" /></span>
        </template>
        <slot name="attach" :active="items[index]"></slot>
    </div>
</template>

<script setup>
import { Gate, GateContent } from '../gate'
import { defineProps, ref, watchEffect } from 'vue'
import UIIcon from '../icon'

const props = defineProps({
    items: Array,
    currentIndex: {
        type: Number,
        default: 0,
    },
    showCtrl: {
        type: Boolean,
    },
})
const index = ref()

watchEffect(() => (index.value = props.currentIndex))

const prevHandler = () => {
    if (index.value > 0) {
        index.value--
    }
}
const nextHandler = () => {
    if (index.value < props.items.length - 1) {
        index.value++
    }
}
</script>

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