lxr 2 сар өмнө
parent
commit
11d6d4dd68

+ 12 - 2
src/components/Upload/Imgs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="upload-box">
+  <div class="upload-box" :class="{ 'hide-upload-trigger': shouldHideUploadTrigger }">
     <el-upload
       v-model:file-list="_fileList"
       action="#"
@@ -75,6 +75,7 @@ interface UploadFileProps {
   onSuccess?: (url: string) => void;
   onVideoPreview?: (url: string) => void; // 点击视频「查看」时的回调,用于父级弹窗放大预览(不传则新标签页打开)
   showSuccessNotification?: boolean; // 是否显示上传成功通知 ==> 非必传(默认为 true)
+  hideUploadTrigger?: boolean; // 是否隐藏上传入口(达限或自定义隐藏时使用)==> 非必传(默认为 false)
 }
 
 const props = withDefaults(defineProps<UploadFileProps>(), {
@@ -87,9 +88,13 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
   height: "150px",
   width: "150px",
   borderRadius: "8px",
-  showSuccessNotification: true
+  showSuccessNotification: true,
+  hideUploadTrigger: false
 });
 
+// 上传入口是否隐藏(达限或显式传入 hideUploadTrigger 时)
+const shouldHideUploadTrigger = computed(() => props.hideUploadTrigger || (props.fileList?.length ?? 0) >= props.limit);
+
 // 获取 el-form 组件上下文
 const formContext = inject(formContextKey, void 0);
 // 获取 el-form-item 组件上下文
@@ -426,5 +431,10 @@ const handlePictureCardPreview: UploadProps["onPreview"] = file => {
     line-height: 15px;
     text-align: center;
   }
+
+  /* 隐藏上传入口(达限或 hideUploadTrigger 为 true 时),隐藏包含 Plus 图标的触发区域 */
+  &.hide-upload-trigger :deep(.el-upload:has(.upload-empty)) {
+    display: none;
+  }
 }
 </style>