el-upload 上传文件样式
时间: 2023-09-06 19:14:29 浏览: 262
el-upload 是 Element UI 中的一个组件,用于实现文件上传功能。它的样式可以通过自定义 CSS 类来实现,以下是一个示例:
```html
<template>
<div class="upload-container">
<el-upload
class="upload"
action="/your-upload-url"
:data="{token: 'your-token'}"
:headers="{Authorization: 'Bearer your-token'}"
:auto-upload="false"
>
<el-button type="primary">点击上传</el-button>
<div slot="tip" class="upload-tip">只能上传jpg/png文件,且不超过2MB</div>
</el-upload>
</div>
</template>
<style>
.upload-container {
width: 300px;
}
.upload {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
border: 1px dashed #ccc;
border-radius: 4px;
background-color: #f5f7fa;
}
.upload-tip {
margin-top: 10px;
color: #909399;
}
</style>
```
在上述示例中,我们通过添加自定义 CSS 类 `upload-container` 来设定整个上传区域的宽度。通过 `upload` 类来设定上传区域的样式,包括居中显示、高度、边框样式等。通过 `upload-tip` 类来设定提示信息的样式。
请根据自己的需求修改上述示例中的 CSS 样式来达到你想要的上传文件样式。
阅读全文