el-upload文件名悬浮显示

el-upload组件是Element UI库中的一个用于上传文件的功能组件，在Vue.js中很常见。当文件上传完成后，默认情况下，文件名会在上传区域显示。如果你想让文件名悬浮显示，你可以通过自定义样式或者组件的`on-success`回调函数来实现。

1. **CSS样式**:
可以通过添加样式，比如设置`.el-upload__preview`类的`position`属性为`relative`，然后为每个上传成功的文件创建一个新的`<div>`标签，并设置其`position`为`absolute`，`top`为0，`left`为文件名的宽度，实现浮动效果。例如：

   .el-upload__preview {
     position: relative;
   }
   
   .file-preview-float {
     position: absolute;
     top: 0;
     left: 100%; /* 文件名宽度 */
   }

2. **JavaScript动态样式**:
如果你想更精确地控制浮动物体的位置，可以在`on-success`钩子里计算并应用样式。例如：

   uploadSuccess(response, file) {
     const fileName = response.file.name;
     this.$refs.uploadPreview.append(
       `<div class="file-preview-float">${fileName}</div>`,
       { position: 'absolute', top: 0, left: file.name.length * 8 + 'px' } // 假设名字平均字符宽度为8px
     );
   }

请注意，这里的代码示例假设你已经有一个名为`el-upload`的元素，并且`this.$refs.uploadPreview`指向了它对应的`<el-upload>`元素的预览区域。根据实际项目结构和需求调整代码。