el-upload drag修改大小
时间: 2025-02-07 14:03:23 浏览: 92
### 调整 Element UI `el-upload` 组件拖拽区域尺寸
为了调整 `el-upload` 组件中的拖拽区域 (`drag` 区域) 的大小,可以通过自定义 CSS 或者内联样式来实现。默认情况下,Element UI 提供了一个类名为 `.el-upload-dragger` 来包裹整个拖拽区[^1]。
通过覆盖该类的选择器可以轻松改变其宽度和高度:
```css
/* 自定义CSS */
.el-upload-dragger {
width: 300px;
height: 200px;
}
```
如果希望更加灵活地控制样式,可以在模板中直接应用内联样式到 `<el-upload>` 标签上:
```vue
<template>
<div>
<!-- 使用 inline style -->
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
:style="{width:'400px',height:'300px'}">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
</div>
</template>
<script>
export default {};
</script>
```
上述两种方式都可以有效地更改拖拽区域的外观尺寸。需要注意的是,在某些复杂布局下可能还需要额外处理响应式设计等问题以确保最佳用户体验[^2]。
阅读全文
相关推荐












通过cypress 上传文件并检查文件是否上传成功 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.37em" height="1em" viewBox="0 0 1920 1408" data-icon="fa:cloud-upload" class="iconify iconify--fa"></svg> 拖动文件到此处或点击上传 支持的文件格式:xls、xlsx、pdf、jpg、png、doc、docx、zip、rar、7z,不超过100M <input class="el-upload__input" name="file" multiple="" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.zip,.rar,.7z" type="file"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg>立项备案导出.xlsx<label class="el-upload-list__item-status-label"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg></label><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg>按 delete 键可删除<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg>sh001.jpg<label class="el-upload-list__item-status-label"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg></label><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg>按 delete 键可删除






