feat: 上传list-type
This commit is contained in:
@@ -3,6 +3,8 @@
|
||||
去除使用`file-type`库进行文件类型检测 在Safari无法使用
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
import type { UploadListType } from 'ant-design-vue/es/upload/interface';
|
||||
|
||||
import type { BaseUploadProps, UploadEmits } from './props';
|
||||
|
||||
import { computed } from 'vue';
|
||||
@@ -17,7 +19,14 @@ import { uploadApi } from '#/api';
|
||||
import { defaultFileAcceptExts, defaultFilePreview } from './helper';
|
||||
import { useUpload } from './hook';
|
||||
|
||||
interface FileUploadProps extends BaseUploadProps {}
|
||||
interface FileUploadProps extends BaseUploadProps {
|
||||
/**
|
||||
* 同antdv的listType 但是排除picture-card
|
||||
* 文件上传不适合用picture-card显示
|
||||
* @default text
|
||||
*/
|
||||
listType?: Exclude<UploadListType, 'picture-card'>;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<FileUploadProps>(), {
|
||||
api: () => uploadApi,
|
||||
@@ -34,6 +43,7 @@ const props = withDefaults(defineProps<FileUploadProps>(), {
|
||||
enableDragUpload: false,
|
||||
directory: false,
|
||||
abortOnUnmounted: true,
|
||||
listType: 'text',
|
||||
});
|
||||
|
||||
const emit = defineEmits<UploadEmits>();
|
||||
@@ -70,6 +80,7 @@ Upload.Dragger只会影响样式
|
||||
<CurrentUploadComponent
|
||||
v-model:file-list="innerFileList"
|
||||
:accept="accept"
|
||||
:list-type="listType"
|
||||
:disabled="disabled"
|
||||
:directory="directory"
|
||||
:max-count="maxCount"
|
||||
|
@@ -12,7 +12,7 @@ import type { BaseUploadProps, UploadEmits } from './props';
|
||||
|
||||
import { $t, I18nT } from '@vben/locales';
|
||||
|
||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue';
|
||||
import { Image, ImagePreviewGroup, Upload } from 'ant-design-vue';
|
||||
import { isFunction } from 'lodash-es';
|
||||
|
||||
@@ -91,10 +91,19 @@ function currentPreview(file: UploadFile) {
|
||||
@change="handleChange"
|
||||
@remove="handleRemove"
|
||||
>
|
||||
<div v-if="innerFileList?.length < maxCount">
|
||||
<div
|
||||
v-if="innerFileList?.length < maxCount && listType === 'picture-card'"
|
||||
>
|
||||
<PlusOutlined />
|
||||
<div class="mt-[8px]">{{ $t('component.upload.upload') }}</div>
|
||||
</div>
|
||||
<a-button
|
||||
v-if="innerFileList?.length < maxCount && listType !== 'picture-card'"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<UploadOutlined />
|
||||
{{ $t('component.upload.upload') }}
|
||||
</a-button>
|
||||
</Upload>
|
||||
<slot name="helpMessage" v-bind="{ maxCount, disabled, maxSize, accept }">
|
||||
<I18nT
|
||||
@@ -102,7 +111,10 @@ function currentPreview(file: UploadFile) {
|
||||
scope="global"
|
||||
keypath="component.upload.uploadHelpMessage"
|
||||
tag="div"
|
||||
:class="{ 'upload-text__disabled': disabled }"
|
||||
:class="{
|
||||
'upload-text__disabled': disabled,
|
||||
'mt-2': listType !== 'picture-card',
|
||||
}"
|
||||
>
|
||||
<template #size>
|
||||
<span
|
||||
|
Reference in New Issue
Block a user