elk/components/modal/ModalMediaPreview.vue
2022-12-02 15:02:44 +08:00

54 lines
1.7 KiB
Vue

<script setup lang="ts">
const emit = defineEmits(['close'])
const current = computed(() => mediaPreviewList.value[mediaPreviewIndex.value])
const hasNext = computed(() => mediaPreviewIndex.value < mediaPreviewList.value.length - 1)
const hasPrev = computed(() => mediaPreviewIndex.value > 0)
const keys = useMagicKeys()
whenever(keys.arrowLeft, prev)
whenever(keys.arrowRight, next)
function next() {
if (hasNext.value)
mediaPreviewIndex.value++
}
function prev() {
if (hasPrev.value)
mediaPreviewIndex.value--
}
function onClick(e: MouseEvent) {
const path = e.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
if (!el)
emit('close')
}
</script>
<template>
<div relative h-full w-full flex select-none pointer-events-none>
<div absolute top-0 left-0 right-0 text-center>
{{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }}
</div>
<button v-if="hasNext" btn-action-icon absolute pointer-events-auto top="1/2" right-1 title="Next" @click="next">
<div i-ri:arrow-right-s-line />
</button>
<button v-if="hasPrev" btn-action-icon absolute pointer-events-auto top="1/2" left-1 title="Next" @click="prev">
<div i-ri:arrow-left-s-line />
</button>
<img :src="current.url || current.previewUrl" :alt="current.description || ''" w="max-[95%]" h="max-[95%]" ma>
<button
btn-action-icon bg="black/20" aria-label="Close"
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20"
absolute top-0 right-0 m1 pointer-events-auto
@click="emit('close')"
>
<div i-ri:close-fill text-white />
</button>
</div>
</template>