theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lockingreal 2022-04-13 23:59:45 +08:00
parent 559f09d80c
commit 1864762de5
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package/component/src/component/upload/index.less
View File

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

6
package/component/src/component/upload/index.vue
View File

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

5
package/document/src/document/zh-CN/components/upload.md
View File

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