diff --git a/packages/varlet-ui/src/uploader/Uploader.vue b/packages/varlet-ui/src/uploader/Uploader.vue index 3eeb75bf2c5..312a9ec1cfd 100644 --- a/packages/varlet-ui/src/uploader/Uploader.vue +++ b/packages/varlet-ui/src/uploader/Uploader.vue @@ -29,12 +29,12 @@ " v-if="!maxlength || modelValue.length < maxlength" v-ripple="{ disabled: disabled || formDisabled || readonly || formReadonly || !ripple || $slots.default }" - @click="triggerAction" + @click="chooseFile" > { - input.value!.click() - } - const preview = (varFile: VarFile) => { const { disabled, readonly, previewed } = props @@ -298,6 +294,18 @@ export default defineComponent({ // expose const getLoading = () => props.modelValue.filter((varFile) => varFile.state === 'loading') + // expose + const chooseFile = () => { + input.value!.click() + } + + // expose + const closePreview = () => { + currentPreview.value = null + showPreview.value = false + ImagePreview.close() + } + const varFileUtils: VarFileUtils = { getSuccess, getError, @@ -354,7 +362,6 @@ export default defineComponent({ formDisabled: form?.disabled, formReadonly: form?.readonly, preview, - triggerAction, handleChange, handleRemove, getSuccess, @@ -363,6 +370,8 @@ export default defineComponent({ validate, resetValidation, reset, + chooseFile, + closePreview, } }, }) diff --git a/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap index 7941ac72db8..26f151c8519 100644 --- a/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap @@ -3,7 +3,7 @@ exports[`test uploader disabled 1`] = ` "
-
+
@@ -28,7 +28,7 @@ exports[`test uploader disabled 2`] = `
-
+
@@ -48,7 +48,7 @@ exports[`test uploader example 1`] = ` "
基本使用
-
+
@@ -75,7 +75,7 @@ exports[`test uploader example 1`] = `
-
+
@@ -107,7 +107,7 @@ exports[`test uploader example 1`] = `
-
+
@@ -124,7 +124,7 @@ exports[`test uploader example 1`] = `
文件数量限制
-
+
@@ -152,7 +152,7 @@ exports[`test uploader example 1`] = `
文件大小限制
-
+
@@ -169,7 +169,7 @@ exports[`test uploader example 1`] = `
上传预处理
-
+
@@ -186,7 +186,7 @@ exports[`test uploader example 1`] = `
禁用
-
+
@@ -203,7 +203,7 @@ exports[`test uploader example 1`] = `
只读
-
+
@@ -225,7 +225,7 @@ exports[`test uploader example 1`] = `
-
+
@@ -242,7 +242,7 @@ exports[`test uploader example 1`] = `
自定义上传样式
-
@@ -267,7 +267,7 @@ exports[`test uploader example 1`] = `
-
+
@@ -289,7 +289,7 @@ exports[`test uploader example 1`] = `
-
@@ -314,7 +314,7 @@ exports[`test uploader example 1`] = ` exports[`test uploader hide file list 1`] = ` "
-
+
@@ -333,7 +333,7 @@ exports[`test uploader hide file list 1`] = ` exports[`test uploader length over maxlength in multiple mode 1`] = ` "
-
+
@@ -363,7 +363,7 @@ exports[`test uploader length over maxlength in multiple mode 1`] = ` exports[`test uploader validation 1`] = ` "
-
+
@@ -399,7 +399,7 @@ exports[`test uploader validation 2`] = `
-
+
diff --git a/packages/varlet-ui/src/uploader/__tests__/index.spec.js b/packages/varlet-ui/src/uploader/__tests__/index.spec.js index f8559403da1..ad038f1c55b 100644 --- a/packages/varlet-ui/src/uploader/__tests__/index.spec.js +++ b/packages/varlet-ui/src/uploader/__tests__/index.spec.js @@ -1,7 +1,6 @@ import example from '../example' import Uploader from '..' import VarUploader from '../Uploader' -import ImagePreview from '../../image-preview' import { mount } from '@vue/test-utils' import { createApp } from 'vue' import { delay, mockFileReader, mockStubs } from '../../utils/jest' @@ -77,7 +76,7 @@ test('test uploader preview', async () => { await delay(100) expect(document.querySelector('.var-popup').style.display).toBe('') - ImagePreview.close() + wrapper.vm.closePreview() await delay(300) mockRestoreStubs() diff --git a/packages/varlet-ui/src/uploader/docs/en-US.md b/packages/varlet-ui/src/uploader/docs/en-US.md index 0807ad0b488..c3dfe566f57 100644 --- a/packages/varlet-ui/src/uploader/docs/en-US.md +++ b/packages/varlet-ui/src/uploader/docs/en-US.md @@ -345,6 +345,8 @@ const files = ref([ | Method | Description | Arguments | Return | | --- | --- | --- | --- | +| `chooseFile` | Trigger the file selection action and display the file list | `-` | `-` | +| `closePreview` | Close preview file popup | `-` | `-` | | `getLoading` | Gets a collection of files for `state` is `loading` | `-` | `VarFile[]` | | `getSuccess` | Gets a collection of files for `state` is `success` | `-` | `VarFile[]` | | `getError` | Gets a collection of files for `state` is `error` | `-` | `VarFile[]` | diff --git a/packages/varlet-ui/src/uploader/docs/zh-CN.md b/packages/varlet-ui/src/uploader/docs/zh-CN.md index 61748c1b1ba..532dd56840c 100644 --- a/packages/varlet-ui/src/uploader/docs/zh-CN.md +++ b/packages/varlet-ui/src/uploader/docs/zh-CN.md @@ -345,6 +345,8 @@ const files = ref([ | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | +| `chooseFile` | 触发选择文件动作,显示文件列表 | `-` | `-` | +| `closePreview` | 关闭预览文件弹出层 | `-` | `-` | | `getLoading` | 获取 `state` 等于 `loading` 的文件集合| `-` | `VarFile[]` | | `getSuccess` | 获取 `state` 等于 `success` 的文件集合| `-` | `VarFile[]` | | `getError` | 获取 `state` 等于 `error` 的文件集合 | `-` | `VarFile[]` | diff --git a/packages/varlet-ui/types/uploader.d.ts b/packages/varlet-ui/types/uploader.d.ts index 181c44706e5..1fa17787b15 100644 --- a/packages/varlet-ui/types/uploader.d.ts +++ b/packages/varlet-ui/types/uploader.d.ts @@ -67,6 +67,10 @@ export class Uploader extends VarComponent { resetValidation(): void reset(): void + + chooseFile(): void + + closePreview(): void } export class _UploaderComponent extends Uploader {}