diff --git a/src/uploader/README.md b/src/uploader/README.md index f2ef1839d..3ab77d1c3 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -358,6 +358,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Upload | closeImagePreview | Close full screen image preview | - | - | | chooseFile | Trigger choosing files, works with the user action context only because of browser security | - | - | +### Types + +Get the type definition of the Uploader instance through `UploaderInstance`. + +```ts +import { ref } from 'vue'; +import type { UploaderInstance } from 'vant'; + +const uploaderRef = ref(); + +uploaderRef.value?.chooseFile(); +``` + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 1376f8c9f..f13b17580 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -383,6 +383,19 @@ before-read、after-read、before-delete 执行时会传递以下回调参数: | closeImagePreview | 关闭全屏的图片预览 | - | - | | chooseFile | 主动调起文件选择,由于浏览器安全限制,只有在用户触发操作的上下文中调用才有效 | - | - | +### 类型定义 + +通过 `UploaderInstance` 获取 Uploader 实例的类型定义。 + +```ts +import { ref } from 'vue'; +import type { UploaderInstance } from 'vant'; + +const uploaderRef = ref(); + +uploaderRef.value?.chooseFile(); +``` + ### 样式变量 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 diff --git a/src/uploader/Uploader.tsx b/src/uploader/Uploader.tsx index 80e972656..2293ae4f8 100644 --- a/src/uploader/Uploader.tsx +++ b/src/uploader/Uploader.tsx @@ -1,4 +1,10 @@ -import { ref, reactive, PropType, defineComponent } from 'vue'; +import { + ref, + reactive, + PropType, + defineComponent, + ExtractPropTypes, +} from 'vue'; // Utils import { @@ -17,9 +23,6 @@ import { filterFiles, isImageFile, readFileContent, - UploaderMaxSize, - UploaderResultType, - UploaderFileListItem, } from './utils'; // Composables @@ -34,77 +37,71 @@ import UploaderPreviewItem from './UploaderPreviewItem'; // Types import type { ImageFit } from '../image'; import type { Interceptor } from '../utils/interceptor'; +import type { + UploaderExpose, + UploaderMaxSize, + UploaderAfterRead, + UploaderBeforeRead, + UploaderResultType, + UploaderFileListItem, +} from './types'; -type PromiseOrNot = T | Promise; +const props = { + capture: String, + multiple: Boolean, + disabled: Boolean, + readonly: Boolean, + lazyLoad: Boolean, + uploadText: String, + deletable: truthProp, + afterRead: Function as PropType, + showUpload: truthProp, + beforeRead: Function as PropType, + beforeDelete: Function as PropType, + previewSize: [Number, String], + previewImage: truthProp, + previewOptions: Object as PropType, + previewFullImage: truthProp, + name: { + type: [Number, String], + default: '', + }, + accept: { + type: String, + default: 'image/*', + }, + modelValue: { + type: Array as PropType, + default: () => [], + }, + maxSize: { + type: [Number, String, Function] as PropType, + default: Number.MAX_VALUE, + }, + maxCount: { + type: [Number, String], + default: Number.MAX_VALUE, + }, + imageFit: { + type: String as PropType, + default: 'cover', + }, + resultType: { + type: String as PropType, + default: 'dataUrl', + }, + uploadIcon: { + type: String, + default: 'photograph', + }, +}; -export type UploaderBeforeRead = ( - file: File | File[], - detail: { - name: string | number; - index: number; - } -) => PromiseOrNot; - -export type UploaderAfterRead = ( - items: UploaderFileListItem | UploaderFileListItem[], - detail: { - name: string | number; - index: number; - } -) => void; +export type UploaderProps = ExtractPropTypes; export default defineComponent({ name, - props: { - capture: String, - multiple: Boolean, - disabled: Boolean, - readonly: Boolean, - lazyLoad: Boolean, - uploadText: String, - deletable: truthProp, - afterRead: Function as PropType, - showUpload: truthProp, - beforeRead: Function as PropType, - beforeDelete: Function as PropType, - previewSize: [Number, String], - previewImage: truthProp, - previewOptions: Object as PropType, - previewFullImage: truthProp, - name: { - type: [Number, String], - default: '', - }, - accept: { - type: String, - default: 'image/*', - }, - modelValue: { - type: Array as PropType, - default: () => [], - }, - maxSize: { - type: [Number, String, Function] as PropType, - default: Number.MAX_VALUE, - }, - maxCount: { - type: [Number, String], - default: Number.MAX_VALUE, - }, - imageFit: { - type: String as PropType, - default: 'cover', - }, - resultType: { - type: String as PropType, - default: 'dataUrl', - }, - uploadIcon: { - type: String, - default: 'photograph', - }, - }, + props, emits: [ 'delete', @@ -358,7 +355,7 @@ export default defineComponent({ } }; - useExpose({ + useExpose({ chooseFile, closeImagePreview, }); diff --git a/src/uploader/UploaderPreviewItem.tsx b/src/uploader/UploaderPreviewItem.tsx index 8e407d3e4..c2259d9e4 100644 --- a/src/uploader/UploaderPreviewItem.tsx +++ b/src/uploader/UploaderPreviewItem.tsx @@ -1,7 +1,7 @@ import { PropType, defineComponent } from 'vue'; // Utils -import { bem, isImageFile, UploaderFileListItem } from './utils'; +import { bem, isImageFile } from './utils'; import { isDef, getSizeStyle, extend } from '../utils'; import { callInterceptor, Interceptor } from '../utils/interceptor'; @@ -10,6 +10,9 @@ import { Icon } from '../icon'; import { Image, ImageFit } from '../image'; import { Loading } from '../loading'; +// Types +import type { UploaderFileListItem } from './types'; + export default defineComponent({ props: { name: [Number, String], diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue index e0d35cf10..8f04a320d 100644 --- a/src/uploader/demo/index.vue +++ b/src/uploader/demo/index.vue @@ -56,7 +56,7 @@