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>

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

@@ -109,10 +109,10 @@ export default {
 ::: title 自定义预览/上传禁用
 :::
 
-::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互,使用  `disabled` 添加上传禁用
+::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互,使用  `disabled` 对上传按钮添加禁用状态,使用  `disabledPreview` 对上传预览区域添加禁用状态
 
 <template>
-  <lay-upload @done="getUploadFile2" :disabled="true">
+  <lay-upload @done="getUploadFile2" :disabled="true" :disabledPreview="true">
     <template #preview>
       <div class="easy-wrap">
         <img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
@@ -199,6 +199,7 @@ export default {
 | number | 设置同时可上传的文件数量，一般配合 multiple 参数出现。 | number  | `0(不限制)`  | -- |
 | drag | 是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9 | boolean  | true  | -- |
 | disabled | 设置文件禁用 | boolean  | false  | -- |
+| disabledPreview | 设置文件预览插槽区域为禁用状态 | boolean  | false  | -- |
 | cut | 是否开启选择图片后检测,设置true可开启 | boolean  | false  | -- |
 | cutOptions | 开启剪裁的模态弹窗与剪裁框的配置 | object  | { layerOption,copperOption }  | -- |