-
Notifications
You must be signed in to change notification settings - Fork 675
Description
如果设置 readonly 上传组件有图片是预期的效果
如果原本就没有图片想达到只读禁用的效果 插槽会丢失 我觉得这并不是预期的效果
我现在的解决方案是
如果图片有值 readonly 为true禁止上传
如果图片没值 disabled 为true禁止上传
这样达到我的需求 是原本就这么设计的吗
因为设置 disabled 有图片有值会有删除按钮 只是不可以上传「当然我后期注意到有一个属性可以控制是否显示删除按钮」
所以我尝试了 readonly 这个时候复现了bug 就是没有图片的时候插槽丢失了无论是自定义插槽 还是默认插槽都没了
// 计算 disabled 属性值
const computedDisabled = computed(() => {
return props.disabled && uploadedFiles.value.length === 0
})
// 计算 readonly 属性值
const computedReadonly = computed(() => {
return props.disabled && uploadedFiles.value.length > 0
})
<uni-file-picker
multiple
:limit="1"
@select="onFileChange"
:file-extname="fileType"
@delete="removeImage"
:modelValue="uploadedFiles"
ref="FilePicker"
:auto-upload="false"
mode="grid"
:disabled="computedDisabled"
:readonly="computedReadonly"
<slot>
<view class="upload-btn">
<uni-icons type="camera-filled" color="#ccc" size="40"></uni-icons>
</view>
</slot>