el-upload slot
时间: 2023-12-13 20:34:15 浏览: 88
el-upload组件提供了多个插槽(slot)来自定义上传组件的不同部分。以下是el-upload组件的几个插槽及其作用:
1. trigger:用于自定义上传触发按钮的内容,例如可以在按钮中添加图标或文字。
```html
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple>
<span slot="trigger">点击上传</span>
</el-upload>
```
2. tip:用于自定义上传提示信息的内容,例如可以在提示信息中添加上传文件类型和大小的限制。
```html
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple>
<div slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
3. default:用于自定义上传列表的内容,例如可以在列表中添加文件名、文件大小、上传进度等信息。
```html
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple>
<div slot="default" class="upload-list">
<div class="upload-item" v-for="file in fileList" :key="file.name">
<span class="file-name">{{ file.name }}</span>
<span class="file-size">{{ file.size }} bytes</span>
<el-progress class="file-progress" :percentage="file.percentage"></el-progress>
</div>
</div>
</el-upload>
```
阅读全文