el-upload 文件名过长悬浮显示
时间: 2023-06-29 22:10:12 浏览: 391
elemetUi 组件--el-upload实现上传Excel文件的实例
5星 · 资源好评率100%
你可以使用 `el-tooltip` 组件来实现文件名过长时的悬浮显示。首先在 `el-upload` 的 `slot-scope` 中获取到文件名,然后将 `el-tooltip` 组件包裹在 `el-upload-list` 的子元素中,设置 `content` 属性为文件名,`effect` 属性为 `dark`,`placement` 属性为 `top` 或者 `bottom`,这样当鼠标悬浮在文件名上时,就会显示一个提示框来显示完整的文件名。
示例代码:
```html
<el-upload
class="upload-demo"
action="/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false"
:list-type="'picture-card'"
:before-upload="beforeUpload"
:limit="3"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:on-error="handleError"
:show-file-list="false"
>
<i class="el-icon-plus"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
<template slot-scope="{ file }">
<el-tooltip class="item" effect="dark" :content="file.name" :placement="$index % 2 === 0 ? 'bottom' : 'top'">
<img :src="file.url" class="el-upload-list__item-thumbnail" :class="{ 'is-removed': file.status === 'removed' }">
<i class="el-icon-close" @click="handleRemove(file)"></i>
</el-tooltip>
</template>
</el-upload>
```
阅读全文