✨(upload): 新增 default 插槽

更新文档

package/component/src/component/upload/index.vue

@@ -362,37 +362,39 @@ const chooseFile = () => {
   if (_target) {
     _target.click();
   }
-  // _target?.onclick();
 };
 const clickOrgInput = () => {
   let currentTimeStamp = new Date().valueOf();
   emit("choose", currentTimeStamp);
 };
 const cutTransaction = () => {};
-//内部方法 -> end
 </script>
+
 <template>
   <div
     class="layui-upload layui-upload-wrap"
     :class="disabledPreview ? 'layui-upload-file-disabled' : ''"
   >
     <input
-      class="layui-upload-file"
-      @click="clickOrgInput"
-      :multiple="multiple"
       type="file"
+      ref="orgFileInput"
+      class="layui-upload-file"
+      :multiple="multiple"
       :accept="acceptMime"
       :name="field"
-      @change="getUploadChange"
       :field="field"
       :disabled="disabled"
-      ref="orgFileInput"
+      @click="clickOrgInput"
+      @change="getUploadChange"
     />
     <div v-if="!drag">
-      <div class="layui-upload-btn-box">
+      <div class="layui-upload-btn-box" @click.stop="chooseFile">
-        <lay-button type="primary" @click.stop="chooseFile" :disabled="disabled"
+        <template v-if="slot.default">
-          >上传图片</lay-button
+          <slot :disabled="disabled"></slot>
-        >
+        </template>
+        <template v-else>
+          <lay-button type="primary" :disabled="disabled">上传文件</lay-button>
+        </template>
       </div>
     </div>
     <div
@@ -415,6 +417,7 @@ const cutTransaction = () => {};
       </div>
     </div>
     <lay-layer
+      v-model="innerCutVisible"
       :title="computedCutLayerOption.title"
       :move="computedCutLayerOption.move"
       :resize="computedCutLayerOption.resize"
@@ -427,7 +430,6 @@ const cutTransaction = () => {};
       :anim="computedCutLayerOption.anim"
       :isOutAnim="computedCutLayerOption.isOutAnim"
       :btn="computedCutLayerOption.btn"
-      v-model="innerCutVisible"
       @close="clearAllCutEffect"
     >
       <div

package/document/src/document/zh-CN/components/upload.md

@@ -61,6 +61,63 @@ export default {
 
 :::
 
+::: title 默认插槽
+:::
+
+::: demo 使用 `default` 插槽, 自定义入口
+
+<template>
+  <lay-upload @done="getUploadFile" @choose="beginChoose">
+    <template v-slot:default="params">
+      <lay-button>上传 - 是否禁用 - {{ params.disabled }}</lay-button>
+    </template>
+    <template #preview>
+      <div v-for="(item,index) in picList" :key="`demo1-pic-'${index}`">
+        <img :src="item"/>
+      </div>
+    </template>
+  </lay-upload>
+</template>
+
+<script>
+import { ref,reactive } from 'vue'
+
+export default {
+  setup() {
+    const picList = ref([]);
+    const filetoDataURL=(file,fn)=>{
+      const reader = new FileReader();
+      reader.onloadend = function(e){
+        fn(e.target.result);
+      };
+      reader.readAsDataURL(file);
+    };
+    const getUploadFile=(files)=>{
+      if(Array.isArray(files)&&files.length>0){
+        files.forEach((file,index,array)=>{
+          filetoDataURL(file,(res)=>{
+            console.log(res);
+            picList.value.push(res);
+            console.log(picList.value);
+          });
+        });
+      }
+    };
+    const beginChoose =(e)=>{
+      console.log("beginChoose",e);
+    };
+    return {
+      getUploadFile,
+      filetoDataURL,
+      beginChoose,
+      picList
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 多文件上传
 :::