refactor: 增加disabledPreview属性对预览区域与上传业务按钮进行 禁用 状态隔离,方便业务后续实现
This commit is contained in:
parent
559f09d80c
commit
1864762de5
@ -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;
|
||||
}
|
||||
@ -99,3 +100,10 @@
|
||||
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);
|
||||
}
|
@ -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>
|
||||
|
@ -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 } | -- |
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user