关于vue3中使用el-upload组件上传图片后删除和预览按钮不显示的问题

BruceeLeee2025-11-09 20:56

最近在开发一个基于若衣vue3的项目中，使用了若衣框架中封装好的el-upload组件上传图片。但是发现一个问题，即上传后鼠标放在图片上应该显示的预览和删除按钮不显示。如下图所示：

即便是按照官方文档要求在el-upload将都配置完全也无济于事。

通过F12查看源码和样式排查后，在封装好的组件代码中添加样式（margin-left的值不固定，可根据实际情况赋值）：

复制代码

<style scoped lang="scss">
:deep(.el-upload-list--picture-card .el-upload-list__item-actions span+span) {
  margin-left: 10px;
}
</style>

这样后，再次将鼠标置于图片上，删除和预览按钮就可以看到了：

这是第二次遇到这种情况。上次的项目修改过后忘记了。这次又遇到了这个问题，因此在这里记录一下。也给碰到该问题的同行有个解决的思路。

如果有其他好方法，欢迎在评论区讨论。