fix(uploader): use label tag to replace div

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

@@ -557,9 +557,7 @@ exports[`test form with switch 3`] = `
 exports[`test form with uploader 1`] = `
 "<div class=\\"var-form\\">
   <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>
+    <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-136\\" class=\\"var-uploader__action var-elevation--2 var-uploader--disabled\\"><input id=\\"var-uploader-136\\" 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></label></div>
     <transition-stub>
       <!--v-if-->
     </transition-stub>
@@ -578,9 +576,7 @@ exports[`test form with uploader 1`] = `
 exports[`test form with uploader 2`] = `
 "<div class=\\"var-form\\">
   <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>
+    <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-136\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-136\\" 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></label></div>
     <transition-stub>
       <!--v-if-->
     </transition-stub>
@@ -599,9 +595,7 @@ exports[`test form with uploader 2`] = `
 exports[`test form with uploader 3`] = `
 "<div class=\\"var-form\\">
   <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>
+    <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-136\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-136\\" 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></label></div>
     <transition-stub>
       <div class=\\"var-form-details\\">
         <div class=\\"var-form-details__message\\">至少上传一个</div>
@@ -623,9 +617,7 @@ exports[`test form with uploader 3`] = `
 exports[`test form with uploader 4`] = `
 "<div class=\\"var-form\\">
   <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>
+    <div class=\\"var-uploader__file-list\\"><label for=\\"var-uploader-136\\" class=\\"var-uploader__action var-elevation--2\\"><input id=\\"var-uploader-136\\" 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></label></div>
     <transition-stub>
       <!--v-if-->
     </transition-stub>

packages/varlet-ui/src/uploader/Uploader.vue

@@ -20,17 +20,17 @@
         ></div>
       </div>
 
-      <div
+      <label
+        :for="id"
         :class="
           classes([!$slots.default, `${n('action')} var-elevation--2`], [disabled || formDisabled, n('--disabled')])
         "
         v-if="!maxlength || modelValue.length < maxlength"
         v-ripple="{ disabled: disabled || formDisabled || readonly || formReadonly || !ripple || $slots.default }"
-        @click="triggerAction"
       >
         <input
+          :id="id"
           :class="n('action-input')"
-          ref="input"
           type="file"
           :multiple="multiple"
           :accept="accept"
@@ -42,7 +42,7 @@
         <slot>
           <var-icon :class="n('action-icon')" var-uploader-cover name="plus" />
         </slot>
-      </div>
+      </label>
     </div>
 
     <var-form-details :error-message="errorMessage" :maxlength-text="maxlengthText" />
@@ -75,7 +75,7 @@ import VarIcon from '../icon'
 import VarPopup from '../popup'
 import ImagePreview from '../image-preview'
 import Ripple from '../ripple'
-import { defineComponent, nextTick, reactive, computed, watch, ref } from 'vue'
+import { defineComponent, nextTick, reactive, computed, watch, ref, getCurrentInstance } from 'vue'
 import { props } from './props'
 import { isNumber, isHTMLSupportImage, isHTMLSupportVideo, toNumber, isString } from '../utils/shared'
 import { call, useValidation, createNamespace } from '../utils/components'
@@ -111,7 +111,7 @@ export default defineComponent({
   },
   props,
   setup(props) {
-    const input: Ref<null | HTMLElement> = ref()
+    const id: Ref<string> = ref(`var-uploader-${getCurrentInstance()!.uid}`)
     const showPreview: Ref<boolean> = ref(false)
     const currentPreview: Ref<null | VarFile> = ref(null)
     const maxlengthText: ComputedRef<string> = computed(() => {
@@ -141,10 +141,6 @@ export default defineComponent({
       return modelValue
     })
 
-    const triggerAction = () => {
-      input.value!.click()
-    }
-
     const preview = (varFile: VarFile) => {
       const { disabled, readonly, previewed } = props
 
@@ -326,7 +322,7 @@ export default defineComponent({
     return {
       n,
       classes,
-      input,
+      id,
       files,
       showPreview,
       currentPreview,
@@ -336,7 +332,6 @@ export default defineComponent({
       isHTMLSupportImage,
       formDisabled: form?.disabled,
       formReadonly: form?.readonly,
-      triggerAction,
       preview,
       handleChange,
       handleRemove,