element ui el-upload 上传文件 文件名太长显示不完全 需要鼠标放在文件名显示全部
时间: 2023-09-08 10:17:15 浏览: 259
您可以通过以下两种方式实现文件名过长时鼠标悬停显示全部的效果:
1. 使用tooltip属性
在el-upload组件中添加tooltip属性,并将其值设置为文件名,这样鼠标悬停在文件名上时就会显示全部的文件名。
```html
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:limit="1"
:tooltip="fileName"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
```
```js
data() {
return {
fileName: ''
}
},
methods: {
handleSuccess(response, file, fileList) {
this.fileName = file.name;
},
beforeUpload(file) {
this.fileName = file.name;
return true;
}
}
```
2. 使用css样式
在el-upload组件中添加一个span元素,用于显示文件名。然后,通过css样式控制该span元素的宽度和文本溢出显示省略号,鼠标悬停在span上时显示全部的文件名。
```html
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:limit="1"
>
<el-button size="small" type="primary">点击上传</el-button>
<span class="file-name">{{ fileName }}</span>
</el-upload>
```
```css
.file-name {
max-width: 100px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-name:hover {
max-width: none;
overflow: visible;
white-space: normal;
}
```