使用el-upload满足详情页面只展示图片

PXYC_J

于 2025-03-18 09:04:07 发布

阅读量209

点赞数 1

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_39536826/article/details/146332015

版权

需求：详情页面只展示图片+鼠标移入时可放大，不要上传等其他功能
原本效果图：
在这里插入图片描述

想要的效果图（去掉删除按钮+右侧上传框，变为）：
在这里插入图片描述

1、结构代码中设置 disabled为true
代码如下：

<el-upload
 v-model:file-list="fileList"
  action="#"
  list-type="picture-card"
  :on-preview="dialogObj.openDialog"
  :disabled="true" //设置为true
  class="applet_upload"
>
  <el-icon><Plus /></el-icon>
</el-upload>

2、根据设置的类名 applet_upload控制样式
代码如下：

<style lang="scss" >
 .页面类名{
    .applet_upload .el-upload--picture-card{
      display: none !important;
    }
    .el-upload-list__item.is-success .el-upload-list__item-status-label{
      display:none;
    }
 }
</style>