Fes Design

InputFile 文件选择 ​

组件注册 ​

js
import { FInputFile } from '@fesjs/fes-design';

app.use(FInputFile);

代码演示 ​

基础用法 ​

play
<template>
    <FForm layout="inline" :inlineItemWidth="120">
        <FFormItem label="多选:">
            <FSwitch v-model="multiple" />
        </FFormItem>
        <FFormItem label="禁用:">
            <FSwitch v-model="disabled" />
        </FFormItem>
    </FForm>

    <FDivider />

    <FInputFile
        :multiple="multiple"
        :disabled="disabled"
        :accept="['image/*']"
        @change="handleChange"
    />
</template>

<script setup>
import { ref } from 'vue';

const multiple = ref(false);
const disabled = ref(false);

const handleChange = (files) =>
    console.log('[inputFile.basic]', '[handleChange]', files);
</script>

拖放文件 ​

play
<template>
    <FForm layout="inline" :inlineItemWidth="120">
        <FFormItem label="多选:">
            <FSwitch v-model="multiple" />
        </FFormItem>
        <FFormItem label="禁用:">
            <FSwitch v-model="disabled" />
        </FFormItem>
    </FForm>

    <FDivider />

    <FInputFileDragger
        :multiple="multiple"
        :disabled="disabled"
        :accept="['.pdf']"
        @change="handleChange"
    >
        点击或者拖拽文件到此区域
    </FInputFileDragger>
</template>

<script setup>
import { ref } from 'vue';

const multiple = ref(false);
const disabled = ref(false);

const handleChange = (files) =>
    console.log('[inputFile.basic]', '[handleChange]', files);
</script>

Props ​

属性说明类型默认值
v-model选择的文件File[][]
multiple是否支持多选文件booleanfalse
accept接受的文件类型string[][]
disabled是否禁用booleanfalse

Events ​

事件名称说明回调参数
change选择文件后调用(files: File[]) => void

Slots ​

名称说明参数
default触发文件选择框的内容-
fileList自定义选中文件的展示{ files }

InputFileDragger Props ​

属性说明类型默认值
onFileTypeInvalid拖拽文件类型不满足 accept 时的钩子函数，
若未定义则使用内置提示		(files: File[]) => void-