feat(gallery): scroll to carousel current index
This commit is contained in:
@@ -17,13 +17,18 @@ const props = defineProps<{
|
||||
initialIndex: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{ close: [] }>();
|
||||
const emit = defineEmits<{ close: [number] }>();
|
||||
|
||||
const currentIndex = ref(props.initialIndex);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal fullscreen :ui="{ body: 'bg-black', header: 'hidden' }">
|
||||
<UModal
|
||||
fullscreen
|
||||
:dismissible="false"
|
||||
:ui="{ body: 'bg-black', header: 'hidden' }"
|
||||
@close:prevent="emit('close', currentIndex)"
|
||||
>
|
||||
<template #body>
|
||||
<div
|
||||
class="relative w-full h-full flex flex-col items-center justify-center"
|
||||
@@ -35,11 +40,12 @@ const currentIndex = ref(props.initialIndex);
|
||||
size="xl"
|
||||
class="absolute top-4 right-4 z-10"
|
||||
aria-label="Close modal"
|
||||
@click="emit('close')"
|
||||
@click="emit('close', currentIndex)"
|
||||
/>
|
||||
|
||||
<UCarousel
|
||||
v-slot="{ item }"
|
||||
:start-index="props.initialIndex"
|
||||
:items="images"
|
||||
:ui="{
|
||||
item: 'flex-shrink-0 flex flex-col items-center justify-center select-none',
|
||||
@@ -57,6 +63,7 @@ const currentIndex = ref(props.initialIndex);
|
||||
class: 'right-4!',
|
||||
ui: { leadingIcon: 'size-8' },
|
||||
}"
|
||||
:duration="15"
|
||||
class="w-full h-full mt-10"
|
||||
@select="(index) => (currentIndex = index)"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user