refactor: 图片/文件上传都支持拖拽
This commit is contained in:
parent
621f79e7d8
commit
b9843c6faf
@ -17,13 +17,7 @@ import { uploadApi } from '#/api';
|
||||
import { defaultFileAcceptExts, defaultFilePreview } from './helper';
|
||||
import { useUpload } from './hook';
|
||||
|
||||
interface FileUploadProps extends BaseUploadProps {
|
||||
/**
|
||||
* 是否支持拖拽上传
|
||||
* @default false
|
||||
*/
|
||||
enableDragUpload?: boolean;
|
||||
}
|
||||
interface FileUploadProps extends BaseUploadProps {}
|
||||
|
||||
const props = withDefaults(defineProps<FileUploadProps>(), {
|
||||
api: () => uploadApi,
|
||||
@ -64,6 +58,10 @@ const {
|
||||
} = useUpload(props, ossIdList);
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Upload.Dragger只会影响样式
|
||||
使用普通Upload也是支持拖拽上传的
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<CurrentUploadComponent
|
||||
|
@ -41,6 +41,7 @@ const props = withDefaults(defineProps<ImageUploadProps>(), {
|
||||
disabled: false,
|
||||
listType: 'picture-card',
|
||||
helpMessage: true,
|
||||
enableDragUpload: false,
|
||||
});
|
||||
|
||||
// 双向绑定 ossId
|
||||
|
@ -64,6 +64,11 @@ export interface BaseUploadProps {
|
||||
* @default false
|
||||
*/
|
||||
directory?: boolean;
|
||||
/**
|
||||
* 是否支持拖拽上传
|
||||
* @default false
|
||||
*/
|
||||
enableDragUpload?: boolean;
|
||||
/**
|
||||
* 是否开启深度监听
|
||||
* 默认外部的数组地址重新改变才会触发watch 不会监听内部元素的变化
|
||||
|
@ -86,7 +86,12 @@ function customAccept(accept: string) {
|
||||
:max-count="3"
|
||||
:enable-drag-upload="true"
|
||||
/>
|
||||
当前绑定值: {{ multipleFileId }}
|
||||
<ImageUpload
|
||||
class="mt-3"
|
||||
v-model:value="multipleImageId"
|
||||
:enable-drag-upload="true"
|
||||
:max-count="6"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="禁用上传" size="small">
|
||||
|
Loading…
Reference in New Issue
Block a user