实现效果
添加图片
鼠标放上去显示
点击放大镜按钮(预览)
点击删除按钮
实现代码
<el-upload
v-model:file-list="fileList"
:action="xxxxxxx"
list-type="picture-card"
:class="{ disabledImg: fileList.length > 0 ? true : false }"
:headers="xxxxxxx"
:data="setUpData()"
accept=".jpg,.jpeg,.png"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:limit="1"
:on-success="handleSuccess"
>
<el-icon><Plus /></el-icon>
</el-upload>
通过检测绑定的fileList长度来判断是否显示新的添加
使用动态class来达成样式变换
.disabledImg {
:deep(.el-upload--picture-card) {
display: none;
}
}