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]" />
            </GateContent>
        </Gate>
        <template v-if="showCtrl">
            <span v-if="index !== 0" class="left" @click="prevHandler"><UIIcon type="left" /></span>
            <span v-if="index !== items.length - 1" class="right" @click="nextHandler"><UIIcon type="pull-more" /></span>
        </template>
        <slot name="attach" :active="items[index]" />
    </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, watchEffect } from 'vue'
import UIIcon from '@kankan/components/basic/icon'
import { Gate, GateContent } from '../gate'

defineOptions({
    name: 'UISlide',
})

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> -->