更新 上传组件样式;上传文件limit;参数更新params

src/components/Uploader.vue

@@ -7,15 +7,15 @@
     list-type="picture-card"
     :on-preview="preview"
     :on-remove="remove"
-    :data="{ type, userId: 0, location: '' }"
+    :data="params"
     :on-success="uploadSuccess"
     :file-list="fileList"
     :disabled="disabled"
+    :on-exceed="onExceed"
+    :limit="limit"
   >
-    <div :class="['upload-plus-icon', `${disabled ? 'dn' : ''}`]">+</div>
-    <div :class="['upload-text', `${disabled ? 'dn' : ''}`]">
-      拖拽或点击上传
-    </div>
+    <div :class="['upload-plus-icon']">+</div>
+    <div :class="['upload-text']">拖拽或点击上传</div>
   </el-upload>
   <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
     <el-image
@@ -25,11 +25,20 @@
   </el-dialog>
 </template>
 <script>
-import { defineComponent, computed, ref, onMounted } from "vue";
+import { defineComponent, computed, ref, onMounted, watch } from "vue";
+import {
+  ElMessage,
+  ElNotification,
+} from "_element-plus@1.1.0-beta.24@element-plus";
 import store from "../store/index";
 
 export default defineComponent({
   props: {
+    limit: {
+      type: Number,
+      default: 100,
+    },
+    params: Object,
     actionUrl: {
       type: String,
       default: store.state.uploadUrl,
@@ -38,7 +47,6 @@ export default defineComponent({
       type: String,
       default: "上传文件",
     },
-    type: String,
     disabled: Boolean,
     fileList: Array,
   },
@@ -56,7 +64,31 @@ export default defineComponent({
     function uploadSuccess(res, file, list) {
       emit("onSendFileList", list);
     }
-    onMounted(() => {});
+    function onExceed(files, fileList) {
+      ElMessage({
+        message: `超出文件数量限制 (最大数量:${props.limit})`,
+        type: "warning",
+      });
+    }
+    watch(
+      () => props.disabled,
+      (a, b) => {
+        changeDragVisable(!a);
+      }
+    );
+    function changeDragVisable(boo) {
+      let a = document.getElementsByClassName("el-upload-dragger");
+      let b = document.getElementsByClassName("el-upload--picture-card");
+      for (let i of a) {
+        i.style.display = boo ? "inline-block" : "none";
+      }
+      for (let i of b) {
+        i.style.display = boo ? "inline-block" : "none";
+      }
+    }
+    onMounted(() => {
+      changeDragVisable(false);
+    });
 
     return {
       preview,
@@ -65,6 +97,7 @@ export default defineComponent({
       dialogVisible,
       dialogImageUrl,
       preview,
+      onExceed,
     };
   },
 });
@@ -85,4 +118,7 @@ export default defineComponent({
 .dn {
   display: none;
 }
+:deep().el-upload-dragger {
+  height: 148px !important;
+}
 </style>