feat(ui/uploader): support closePreview and chooseFile and close #843

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
           ref="input"
-          :class="n('action-input')"
           type="file"
+          :class="n('action-input')"
           :multiple="multiple"
           :accept="accept"
           :capture="capture"
@@ -145,10 +145,6 @@ export default defineComponent({
       return modelValue
     })
 
-    const triggerAction = () => {
-      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,
     }
   },
 })

packages/varlet-ui/src/uploader/__tests__/__snapshots__/index.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`test uploader disabled 1`] = `
 "<div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -28,7 +28,7 @@ exports[`test uploader disabled 2`] = `
       <!--v-if-->
       <div class=\\"var-uploader__file-indicator\\"></div>
     </div>
-    <div class=\\"var-uploader__action var-elevation--2 var-uploader--disabled\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2 var-uploader--disabled\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -48,7 +48,7 @@ exports[`test uploader example 1`] = `
 "<div class=\\"app-type\\">基本使用</div>
 <div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -75,7 +75,7 @@ exports[`test uploader example 1`] = `
       <div class=\\"var-uploader__file-close\\"><i class=\\"var-icon var-icon--set var-icon-delete var-uploader__file-close-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div><img class=\\"var-uploader__file-cover\\" src=\\"https://varlet.gitee.io/varlet-ui/cover.jpg\\">
       <div class=\\"var-uploader__file-indicator\\"></div>
     </div>
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -107,7 +107,7 @@ exports[`test uploader example 1`] = `
       <div class=\\"var-uploader__file-close\\"><i class=\\"var-icon var-icon--set var-icon-delete var-uploader__file-close-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div><img class=\\"var-uploader__file-cover\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\">
       <div class=\\"var-uploader__file-indicator var-uploader--error\\"></div>
     </div>
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -124,7 +124,7 @@ exports[`test uploader example 1`] = `
 <div class=\\"app-type\\">文件数量限制</div>
 <div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <div class=\\"var-form-details\\">
@@ -152,7 +152,7 @@ exports[`test uploader example 1`] = `
 <div class=\\"app-type\\">文件大小限制</div>
 <div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -169,7 +169,7 @@ exports[`test uploader example 1`] = `
 <div class=\\"app-type\\">上传预处理</div>
 <div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -186,7 +186,7 @@ exports[`test uploader example 1`] = `
 <div class=\\"app-type\\">禁用</div>
 <div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">
-    <div class=\\"var-uploader__action var-elevation--2 var-uploader--disabled\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2 var-uploader--disabled\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -203,7 +203,7 @@ exports[`test uploader example 1`] = `
 <div class=\\"app-type\\">只读</div>
 <div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -225,7 +225,7 @@ exports[`test uploader example 1`] = `
       <div class=\\"var-uploader__file-close\\"><i class=\\"var-icon var-icon--set var-icon-delete var-uploader__file-close-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div><img class=\\"var-uploader__file-cover\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\">
       <div class=\\"var-uploader__file-indicator\\"></div>
     </div>
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -242,7 +242,7 @@ exports[`test uploader example 1`] = `
 <div class=\\"app-type\\">自定义上传样式</div>
 <div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">
-    <div class=\\"\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\" type=\\"button\\">
+    <div class=\\"\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\" type=\\"button\\">
         <!--v-if-->
         <div class=\\"var-button__content\\">上传</div>
       </button></div>
@@ -267,7 +267,7 @@ exports[`test uploader example 1`] = `
       <div class=\\"var-uploader__file-close\\"><i class=\\"var-icon var-icon--set var-icon-delete var-uploader__file-close-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div><img class=\\"var-uploader__file-cover\\" src=\\"https://varlet.gitee.io/varlet-ui/cat.jpg\\">
       <div class=\\"var-uploader__file-indicator var-uploader--error\\"></div>
     </div>
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -289,7 +289,7 @@ exports[`test uploader example 1`] = `
   <div>
     <div class=\\"var-uploader var--box\\">
       <div class=\\"var-uploader__file-list\\">
-        <div class=\\"\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 var-button--round\\" type=\\"button\\">
+        <div class=\\"\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2 var-button--round\\" type=\\"button\\">
             <!--v-if-->
             <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-upload\\" style=\\"transition: transform 0ms; font-size: 28px;\\"></i></div>
           </button></div>
@@ -314,7 +314,7 @@ exports[`test uploader example 1`] = `
 exports[`test uploader hide file list 1`] = `
 "<div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->
@@ -333,7 +333,7 @@ exports[`test uploader hide file list 1`] = `
 exports[`test uploader length over maxlength in multiple mode 1`] = `
 "<div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <div class=\\"var-form-details\\">
@@ -363,7 +363,7 @@ exports[`test uploader length over maxlength in multiple mode 1`] = `
 exports[`test uploader validation 1`] = `
 "<div class=\\"var-uploader var--box\\">
   <div class=\\"var-uploader__file-list\\">
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <div class=\\"var-form-details\\">
@@ -399,7 +399,7 @@ exports[`test uploader validation 2`] = `
       <!--v-if-->
       <div class=\\"var-uploader__file-indicator\\"></div>
     </div>
-    <div class=\\"var-uploader__action var-elevation--2\\"><input class=\\"var-uploader__action-input\\" type=\\"file\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
+    <div class=\\"var-uploader__action var-elevation--2\\"><input type=\\"file\\" class=\\"var-uploader__action-input\\" accept=\\"image/*\\"><i class=\\"var-icon var-icon--set var-icon-plus var-uploader__action-icon\\" style=\\"transition: transform 0ms;\\" var-uploader-cover=\\"\\"></i></div>
   </div>
   <transition-stub>
     <!--v-if-->

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()

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[]` |

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[]` |

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 {}