47 lines
1.0 KiB
Vue
47 lines
1.0 KiB
Vue
<template>
|
|
<div :class="$style['upload']" @change="onFileChange">
|
|
<input ref="fileRef" :accept="accept" v-show="false" type="file" />
|
|
<el-input :model-value="fileName" :disabled="true" :style="{ width: '200px' }" />
|
|
<el-button :class="$style['scan']" @click="onPreUpload">浏览</el-button>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
withDefaults(defineProps<{
|
|
accept?: any
|
|
}>(), {
|
|
accept: '*'
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
(n: "fileChange", file: File): void
|
|
}>();
|
|
|
|
const fileRef = ref();
|
|
const fileName = ref();
|
|
|
|
const onFileChange = (e: any) => {
|
|
const files = e.target.files;
|
|
fileName.value = files?.[0]?.name;
|
|
emit('fileChange', files?.[0]);
|
|
}
|
|
|
|
const onPreUpload = () => {
|
|
fileRef.value.value = "";
|
|
fileRef.value?.click();
|
|
}
|
|
</script>
|
|
<style module lang="scss">
|
|
:global {
|
|
:local(.upload) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
:local(.scan) {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style> |