refactor: 增加disabledPreview属性对预览区域与上传业务按钮进行 禁用 状态隔离,方便业务后续实现

package/component/src/component/upload/index.less

@@ -79,9 +79,10 @@
   height: 1px;
   opacity: 0.01;
   filter: Alpha(opacity=1);
-  cursor: pointer;
 }
-
+.layui-upload-file-disabled{
+  cursor:not-allowed !important;
+}
 .layui-btn-container .layui-upload-choose {
   padding-left: 0;
 }
@@ -98,4 +99,11 @@
 ._lay_upload_img{
   display: block;
   max-width: 100%;
+}
+.layui-upload-list-disabled{
+  width:auto;
+  height:auto;
+  pointer-events: none !important;
+  background-color: #fbfbfb!important;
+  filter: opacity(0.9);
 }

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

@@ -61,6 +61,7 @@ export interface LayUploadProps {
   number?: number;
   drag?: boolean;
   disabled?: boolean;
+  disabledPreview?:boolean;
   cut?: boolean;
   cutOptions: cutOptions;
 }
@@ -112,6 +113,7 @@ const props = withDefaults(defineProps<LayUploadProps>(), {
   number: 0,
   drag: false,
   disabled: false,
+  disabledPreview:false,
   cut: false,
   cutOptions: void 0,
 });
@@ -348,7 +350,7 @@ const cutTransaction = () => {};
 //内部方法 -> end
 </script>
 <template>
-  <div class="layui-upload layui-upload-wrap">
+  <div class="layui-upload layui-upload-wrap" :class="disabledPreview?'layui-upload-file-disabled':''">
     <input
       class="layui-upload-file"
       @click="clickOrgInput"
@@ -415,7 +417,7 @@ const cutTransaction = () => {};
         />
       </div>
     </lay-layer>
-    <div class="layui-upload-list">
+    <div class="layui-upload-list" :class="disabledPreview?'layui-upload-list-disabled':''">
       <slot name="preview"></slot>
     </div>
   </div>