el-upload样式
时间: 2023-07-17 12:04:16 浏览: 112
你可以使用 `el-upload` 的 `list-type` 属性和自定义的样式来调整上传组件的样式。`list-type` 属性有两个可选值:`text` 和 `picture`,分别表示以文本列表形式和图片列表形式展示上传的文件。
以下是一个示例,展示如何使用 `el-upload` 修改上传组件的样式:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/your-upload-url"
list-type="picture"
>
<el-button slot="trigger" size="small" type="primary">上传文件</el-button>
</el-upload>
</div>
</template>
<style scoped>
.upload-demo {
border: 1px dashed #409eff;
border-radius: 6px;
padding: 20px;
text-align: center;
}
</style>
```
在上述示例中,我们给 `el-upload` 添加了一个名为 `upload-demo` 的类,通过这个类来自定义样式。我们设置了边框、边框圆角、内边距和居中对齐等样式。
同时,我们将 `list-type` 属性设置为 `picture`,以图片列表形式展示上传的文件。
你可以根据自己的需要修改样式,并添加其他样式属性来满足你的设计要求。记得使用 `scoped` 属性来限制样式只应用于当前组件。
阅读全文