120 lines
3.4 KiB
Vue
120 lines
3.4 KiB
Vue
<script lang="ts" setup>
|
|
const emit = defineEmits(['change'])
|
|
const props = defineProps({
|
|
placeholder: {
|
|
type: String,
|
|
default: '点击或拖拽文件到此处',
|
|
},
|
|
placeholderDragover: {
|
|
type: String,
|
|
default: '松开选择文件',
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
accept: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
const inputRef = ref<HTMLInputElement | null>(null)
|
|
const dragover = ref(false)
|
|
|
|
const selectedFiles = ref<File[]>([])
|
|
|
|
const onIncomeFiles = (files?: FileList | null) => {
|
|
if (files && files.length > 0) {
|
|
let wantedFiles = Array.from(files).filter(file => {
|
|
if (props.accept) {
|
|
const accept = props.accept.split(',').map(type => type.trim())
|
|
return accept.includes(file.type)
|
|
}
|
|
return true
|
|
})
|
|
if (wantedFiles.length === 0) {
|
|
console.error('no acceptable file')
|
|
return
|
|
}
|
|
selectedFiles.value = props.multiple ? wantedFiles : [wantedFiles[0]]
|
|
emit('change', files)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="{
|
|
'bg-neutral-300 dark:bg-neutral-900 border-primary-300 dark:border-primary-800 shadow-inner': dragover,
|
|
}"
|
|
class="w-full h-44 relative rounded-md border-2 border-dashed border-neutral-200 dark:border-neutral-800
|
|
bg-inherit cursor-pointer select-none transition duration-200
|
|
hover:border-primary-300 dark:hover:border-primary-800 overflow-hidden"
|
|
@click="inputRef?.click()"
|
|
@dragover.prevent="dragover = true"
|
|
@dragleave.prevent="dragover = false"
|
|
@drop.prevent="$event => {
|
|
dragover = false
|
|
if (!$event.dataTransfer?.files) return
|
|
onIncomeFiles($event.dataTransfer?.files)
|
|
}"
|
|
>
|
|
<input
|
|
ref="inputRef"
|
|
:accept="accept"
|
|
:multiple="multiple"
|
|
class="hidden"
|
|
type="file"
|
|
@change="onIncomeFiles(inputRef?.files)"
|
|
/>
|
|
<div
|
|
:class="{
|
|
'pb-6': selectedFiles.length > 0
|
|
}"
|
|
class="w-full h-full flex flex-col justify-center items-center gap-2 transition-all"
|
|
>
|
|
<Icon
|
|
:name="dragover ? 'i-tabler-drag-drop' : 'i-tabler-upload'"
|
|
class="text-4xl text-neutral-400 dark:text-neutral-500"
|
|
/>
|
|
<p class="text-xs font-medium text-neutral-500 dark:text-neutral-400">
|
|
{{ dragover ? '松开选择文件' : '点击或拖拽文件到此处' }}
|
|
</p>
|
|
</div>
|
|
<div
|
|
v-if="selectedFiles.length > 0"
|
|
class="absolute inset-x-0 bottom-0 pl-2 pr-0.5 py-0.5 flex justify-between items-center bg-neutral-100 dark:bg-neutral-900 border-t dark:border-neutral-800"
|
|
>
|
|
<div class="flex-1 pr-4 overflow-hidden flex items-center gap-1">
|
|
<Icon :name="selectedFiles.length === 1 ? 'i-tabler-file' : 'i-tabler-files'"
|
|
class="text-neutral-500 dark:text-neutral-400"/>
|
|
<p
|
|
:title="selectedFiles.slice(0, 3).map(file => file.name).join(', ')"
|
|
class="text-2xs font-medium overflow-hidden text-ellipsis whitespace-nowrap"
|
|
>
|
|
{{ selectedFiles.slice(0, 3).map(file => file.name).join(', ') }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<UButton
|
|
color="red"
|
|
size="xs"
|
|
square
|
|
variant="ghost"
|
|
@click.stop="() => {
|
|
selectedFiles = []
|
|
inputRef!.value = ''
|
|
}"
|
|
>
|
|
<Icon name="i-tabler-x"/>
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|