vue3项目中使用element Plus的upload上传组件,要求上传后隐藏上传框,只有图片,话不多说,直接上代码。
<el-upload
action="#"
:limit="1"
list-type="picture-card"
:auto-upload="false"
:class="{ disabled: isShow }"
@change="handleImageChange"
>
<el-icon><Plus /></el-icon>
</el-upload>
为这个组件动态添加类disabled,对应的CSS样式为
.disabled .el-upload--picture-card {
display: none !important;
}
思路:为上传组件整个div添加类disabled,上传组件下的类el-upload--picture-card样式隐藏,这个类即为上传框,而不隐藏这个上传组件,导致图片连带被隐藏。打开控制台查看元素样式了解。
其中isShow自己声明为ref对象,根据业务逻辑去定义值何时为true何时为false。
如果样式不生效,有时scpoed也没用,在.disabled前面加上::v-deep即可。