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