antd如何隐藏Upload组件的删除和预览图标

简介: antd如何隐藏Upload组件的删除和预览图标

antd如何隐藏Upload组件的删除和预览图标


如下所示,当Upload组件文件上传成功后,默认会出现预览和删除的图标

如果我们不想显示这两个图标,应该如何操作呢?官方文档上有如下介绍:

通过设置Upload组件的showUploadList属性下的showPreviewIcon, showRemoveIcon, showDownloadIcon,即可控制预览图标、删除图标、下载图标的展示和隐藏

比如,我要隐藏Upload的预览图标

详细代码如下:

<Upload
  action={action}
  accept={accept}
  listType="picture-card"
  maxCount={maxCount}
  multiple
  headers={{'content-type': 'multipart/form-data'}}
  beforeUpload={this.beforeUpload}
  fileList={fileList}
  onRemove={this.onRemove}
  showUploadList={{showPreviewIcon: false}}
>
  上传
</Upload>

通过设置showUploadList={{showPreviewIcon: false}},即可实现预览图标的隐藏,效果如下


目录
相关文章
|
6月前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
511 3
|
6月前
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
567 0
|
存储 缓存 前端开发
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
通过Upload组件结合react-Cropper实现图片的裁剪上传组件封装,剖析antd-img-crop源码实现的逻辑,对自己封装的组件进行进一步优化,改造!
4612 0
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
|
2月前
|
前端开发
element菜单组件样式修改NavMenu导航菜单
本文介绍了如何修改Element UI的NavMenu导航菜单组件的样式,包括激活菜单项的颜色、菜单项hover颜色、父级菜单hover颜色以及菜单行高。提供了相应的CSS代码示例,并展示了如何将这些样式应用到实际的NavMenu组件中。
115 3
element菜单组件样式修改NavMenu导航菜单
|
2月前
|
JavaScript
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
该方案通过自定义Vue指令实现ElementUI的`el-dialog`弹窗的拖拽和最大化功能。只需在`main.js`中引入并注册指令,然后在Vue组件中绑定指令即可。支持自定义参数控制是否允许最大化和拖拽,并提供最大化后的回调函数。具体使用方法详见示例代码。
209 0
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
|
4月前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
328 6
|
4月前
|
JavaScript
vue 指定区域可拖拽的限定拖拽区域的div(如仅弹窗标题可拖拽的弹窗)
vue 指定区域可拖拽的限定拖拽区域的div(如仅弹窗标题可拖拽的弹窗)
191 0
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
6月前
elementUI引用el-image-viewer组件全局方法预览大图
elementUI引用el-image-viewer组件全局方法预览大图
uniapp u-tabs表单如何默认选中
uniapp u-tabs表单如何默认选中
487 0