Skip to content

uni-file-picker readonly 之后默认插槽 & 自定义插槽丢失 #1038

@jiayc4215

Description

@jiayc4215

如果设置 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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions