el-upload上传样式

### 自定义 `el-upload` 组件的上传样式 #### 修改默认样式 为了改变 `el-upload` 的外观，可以通过覆盖其默认 CSS 类来调整样式。Element UI 提供了一系列预设类名，可以直接在项目的全局或局部样式表中重写这些类。 对于整个应用范围内的更改，在 main.css 或者同等级别的样式文件里添加特定的选择器： ```css /* 调整上传按钮 */ .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } /* 当鼠标悬停时的效果 */ .el-upload:hover { border-color: #409EFF; } ``` 针对单个组件内部或者更具体的元素，则可以在该组件对应的 scoped 样式标签下编写规则[^1]。 #### 使用插槽自定义模板 除了简单的样式修改外，还可以利用 Vue 的 slot 特性来自定义上传区域的内容布局。例如创建更加复杂的交互界面或是完全替换原有的图标文字等。 下面是一个例子展示了如何通过具名插槽的方式向上传区域内注入 HTML 结构: ```html <template> <div class="customized-upload"> <!-- 定义触发上传的操作 --> <el-button type="primary">点击上传</el-button> <!-- 插入自定义内容到上传列表项 --> <el-upload action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <i class="el-icon-plus"></i> <!-- 默认显示加号 --> <!-- 如果想要在此处放置图片或其他内容可使用 v-if 控制渲染时机 --> <img v-if="imageUrl" :src="imageUrl" alt="" /> <!-- 这里的 default 插槽允许我们插入任意HTML结构 --> <template #default="{ file }"> {{ file.name }} </template> </el-upload> <!-- 对话框用于查看已选中的图片 --> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </div> </template> <script> export default { data() { return { imageUrl: '', dialogImageUrl: '', dialogVisible: false, }; }, methods:{ handleRemove(file, fileList){ console.log(file,fileList); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; } } }; </script> <style lang="scss" scoped> .customized-upload{ .el-upload--text{ /* 可能需要进一步细化选择符以确保优先级高于框架自带样式 */ background:#fff !important; color:red!important; } img{/* 设置缩略图大小 */ max-width:100%; height:auto; } i{/* 更改未选择文件前占位符的颜色 */ font-size:28px; color:#ccc; } } </style> ``` 上述代码片段不仅改变了视觉效果还增加了功能性的增强，比如支持图片预览对话框等功能[^3]。 #### 动态绑定类名与样式对象 另外一种灵活的方法就是借助于动态绑定机制，即根据数据状态的变化实时更新 DOM 上的 className 属性或者是 inline style 。这种方式特别适合那些依赖业务逻辑变化而需即时反映出来的场景。 例如可以根据当前是否有正在上传的任务来切换不同的背景颜色： ```vue <div :class="[isUploading ? 'uploading' : 'idle']"> ... </div> ``` 以及相应的 SCSS 文件中定义好对应的状态样式： ```scss .uploading { @extend %base-style; &::after { content:""; display:block; clear:both; padding-top:.7em; text-align:center; opacity:.5; transition:all ease-in-out .3s; } } .idle { @extend %base-style; } ``` 这里假设 `%base-style` 是一些基础样式的 mixin ，实际开发过程中应当依据具体情况适当调整[^4]。