98 lines
3.3 KiB
Vue
98 lines
3.3 KiB
Vue
<template>
|
|
<div class="flex flex-wrap gap-3">
|
|
<div v-for="(image, index) in modelValue" :key="index" class="h-20 w-20 p-4 bg-gray-50 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
|
|
<img :src="image" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
|
|
<button @click.stop="deleteImage(index)" class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="h-20 w-20 p-4 bg-gray-100 bg-opacity-50 rounded justify-center items-center flex hover:cursor-pointer" @click="triggerFileInput" @drop.prevent="onDrop" @dragover.prevent>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 invert" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<input type="file" ref="fileInput" @change="onFileChange" multiple accept="image/png" class="hidden" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
interface Props {
|
|
modelValue: string[]
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modelValue: () => []
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string[]): void
|
|
}>()
|
|
|
|
const fileInput = ref<HTMLInputElement | null>(null)
|
|
const draggedIndex = ref<number | null>(null)
|
|
|
|
const triggerFileInput = () => {
|
|
fileInput.value?.click()
|
|
}
|
|
|
|
const onFileChange = (event: Event) => {
|
|
const target = event.target as HTMLInputElement
|
|
if (target.files) {
|
|
handleFiles(target.files)
|
|
}
|
|
}
|
|
|
|
const onDrop = (event: DragEvent) => {
|
|
if (event.dataTransfer?.files) {
|
|
handleFiles(event.dataTransfer.files)
|
|
}
|
|
}
|
|
|
|
const handleFiles = (files: FileList) => {
|
|
Array.from(files).forEach((file) => {
|
|
if (file.type.startsWith('image/')) {
|
|
const reader = new FileReader()
|
|
reader.onload = (e) => {
|
|
if (typeof e.target?.result === 'string') {
|
|
updateImages([...props.modelValue, e.target.result])
|
|
}
|
|
}
|
|
reader.readAsDataURL(file)
|
|
}
|
|
})
|
|
}
|
|
|
|
const updateImages = (newImages: string[]) => {
|
|
emit('update:modelValue', newImages)
|
|
}
|
|
|
|
const deleteImage = (index: number) => {
|
|
const newImages = [...props.modelValue]
|
|
newImages.splice(index, 1)
|
|
updateImages(newImages)
|
|
}
|
|
|
|
const dragStart = (event: DragEvent, index: number) => {
|
|
draggedIndex.value = index
|
|
if (event.dataTransfer) {
|
|
event.dataTransfer.effectAllowed = 'move'
|
|
event.dataTransfer.dropEffect = 'move'
|
|
}
|
|
}
|
|
|
|
const drop = (event: DragEvent, dropIndex: number) => {
|
|
event.preventDefault()
|
|
if (draggedIndex.value !== null && draggedIndex.value !== dropIndex) {
|
|
const newImages = [...props.modelValue]
|
|
const [reorderedItem] = newImages.splice(draggedIndex.value, 1)
|
|
newImages.splice(dropIndex, 0, reorderedItem)
|
|
updateImages(newImages)
|
|
}
|
|
draggedIndex.value = null
|
|
}
|
|
</script>
|