File size: 836 Bytes
89ce340 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<template>
<div class="file-input" @click="handleClick()">
<slot></slot>
<input
class="input"
type="file"
name="upload"
ref="inputRef"
:accept="accept"
@change="$event => handleChange($event)"
>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
withDefaults(defineProps<{
accept?: string
}>(), {
accept: 'image/*',
})
const emit = defineEmits<{
(event: 'change', payload: FileList): void
}>()
const inputRef = ref<HTMLInputElement>()
const handleClick = () => {
if (!inputRef.value) return
inputRef.value.value = ''
inputRef.value.click()
}
const handleChange = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (files) emit('change', files)
}
</script>
<style lang="scss" scoped>
.input {
display: none;
}
</style> |