diff --git a/components/input-file/props.ts b/components/input-file/props.ts index 94f33499..483e240b 100644 --- a/components/input-file/props.ts +++ b/components/input-file/props.ts @@ -9,10 +9,14 @@ import type { ExtractPublicPropTypes, } from '../_util/interface'; +export interface FileItem extends File { + uid?: number | string; +} + const commonProps = { modelValue: { - type: Array as PropType, - default: (): File[] => [], + type: Array as PropType, + default: (): FileItem[] => [], }, accept: { type: Array as PropType, diff --git a/components/input-file/useInputFile.ts b/components/input-file/useInputFile.ts index 023ff50a..8e30b0bc 100644 --- a/components/input-file/useInputFile.ts +++ b/components/input-file/useInputFile.ts @@ -2,7 +2,11 @@ import { computed, ref } from 'vue'; import { CHANGE_EVENT } from '../_util/constants'; import useFormAdaptor from '../_util/use/useFormAdaptor'; import { useNormalModel } from '../_util/use/useModel'; -import type { InputFileEmit, InputFileProps } from './props'; +import type { FileItem, InputFileEmit, InputFileProps } from './props'; + +function genUid(seed: number) { + return Date.now() + seed; +} // 所需的数据 export const useInputFile = (props: InputFileProps, emit: InputFileEmit) => { @@ -27,6 +31,8 @@ export const useInputFile = (props: InputFileProps, emit: InputFileEmit) => { inputRef.value.click(); }; + let tempIndex = 1; + const handleInputFileChange = (e: Event): void => { const target = e.target as HTMLInputElement; @@ -35,6 +41,11 @@ export const useInputFile = (props: InputFileProps, emit: InputFileEmit) => { return; } + files.forEach((rawFile: FileItem) => { + const uid = genUid(tempIndex++); + rawFile.uid = uid; + }); + updateCurrentFiles(files); emit(CHANGE_EVENT, files); diff --git a/docs/.vitepress/components/inputFile/custom.vue b/docs/.vitepress/components/inputFile/custom.vue new file mode 100644 index 00000000..8eab371a --- /dev/null +++ b/docs/.vitepress/components/inputFile/custom.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/docs/.vitepress/components/inputFile/index.md b/docs/.vitepress/components/inputFile/index.md index 1cbe8308..7bbce73c 100644 --- a/docs/.vitepress/components/inputFile/index.md +++ b/docs/.vitepress/components/inputFile/index.md @@ -22,21 +22,27 @@ basic.vue dragAndDrop.vue ::: -## Props +### 自定义 + +:::demo +custom.vue +::: + +## InputFile Props | 属性 | 说明 | 类型 | 默认值 | |----------|----------------|------------|---------| -| v-model | 选择的文件 | `File[]` | `[]` | +| v-model | 选择的文件 | `FileItem[]` | `[]` | | multiple | 是否支持多选文件 | `boolean` | `false` | | accept | 接受的文件类型 | `string[]` | `[]` | | disabled | 是否禁用 | `boolean` | `false` | -## Events +## InputFile Events | 事件名称 | 说明 | 回调参数 | |----------|--------------|---------------------------| -| change | 选择文件后调用 | `(files: File[]) => void` | +| change | 选择文件后调用 | `(files: FileItem[]) => void` | -## Slots +## InputFile Slots | 名称 | 说明 | 参数 | |----------|--------------------|-------------| @@ -48,3 +54,13 @@ dragAndDrop.vue | 属性 | 说明 | 类型 | 默认值 | |-------------------|--------------------------------------------------------------------|---------------------------|--------| | onFileTypeInvalid | 拖拽文件类型不满足 `accept` 时的钩子函数,
若未定义则使用内置提示 | `(files: File[]) => void` | - | + +## 类型 + +### FileItem + +```ts +interface FileItem extends File { + uid?: number | string; +} +```