怎么去掉a-upload中鼠标悬停出现的遮罩层
时间: 2024-03-06 08:50:20 浏览: 21
要去掉a-upload中鼠标悬停出现的遮罩层,你可以通过以下CSS样式代码实现:
```
.el-upload-list__item:hover .el-upload-list__item-actions {
display: block;
}
.el-upload-list__item:hover .el-progress-bar {
display: none;
}
```
这段代码将会在鼠标悬停在上传列表项上时,将进度条隐藏,同时将操作按钮显示出来。这样就可以去掉a-upload中鼠标悬停出现的遮罩层。
相关问题
怎么去掉antd of vue框架中a-upload组件中鼠标悬停出现的遮罩层
您可以通过给a-upload组件添加样式来去掉鼠标悬停时出现的遮罩层。具体的做法是,找到a-upload组件的样式所在的文件(通常为less或sass文件),添加以下样式:
```
.ant-upload-list-item:hover .ant-upload-list-item-actions {
display: block;
}
```
这样就可以去掉鼠标悬停时出现的遮罩层了。
el-upload换成a-upload呢
根据提供的引用内容,el-upload和a-upload都是上传组件,但是它们的实现方式不同。如果要将el-upload换成a-upload,需要进行以下步骤:
1.在HTML文件中引入a-upload组件的代码。
2.将el-upload组件的代码替换为a-upload组件的代码。
3.修改上传成功、改变和删除的方法,使其与a-upload组件兼容。
下面是一个a-upload组件的示例代码:
```html
<a-upload
action="/upload"
:on-success="handleSuccess"
:on-change="handleChange"
:on-remove="handleRemove"
>
<template slot="default">
<div class="a-upload">
<i class="el-icon-upload"></i>
<div class="a-upload-text">将文件拖到此处,或<em>点击上传</em></div>
</div>
</template>
</a-upload>
```
其中,action属性指定了上传文件的地址,on-success、on-change和on-remove属性分别指定了上传成功、改变和删除的方法。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)