vue3 el-upload自定义样式

### Vue3 中为 `el-upload` 组件应用自定义样式的示例 在 Vue3 和 Element Plus 的组合下，可以通过多种方式实现对 `el-upload` 组件的样式定制。以下是几种常见的方法： #### 方法一：通过类名覆盖默认样式 Element Plus 提供了许多可配置的属性和插槽，允许开发者轻松修改上传组件的行为和外观。如果需要全局调整样式，则可以利用 CSS 或 SCSS 覆盖默认样式。 ```css /* 定义新的样式 */ .custom-upload .el-upload { border: 2px dashed var(--el-color-primary-light-7); border-radius: 6px; cursor: pointer; } .custom-upload .el-upload:hover { border-color: var(--el-color-primary); } ``` 将该样式应用于模板中的 `el-upload` 组件时，需为其添加对应的 class 属性[^1]。 ```vue <template> <div class="custom-upload"> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" multiple> <el-button type="primary">点击上传</el-button> <template #tip> <div class="el-upload__tip">仅支持 jpg/png 文件。</div> </template> </el-upload> </div> </template> <script setup> import { ref } from 'vue'; const handleRemove = (file, fileList) => { console.log(file, fileList); }; const handlePreview = (file) => { console.log(file); }; </script> ``` --- #### 方法二：使用 scoped 样式限定作用域 当希望样式只影响当前组件而不污染其他部分时，可以在 `<style>` 块中加入 `scoped` 关键字[^2]。 ```vue <template> <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"> <img v-if="imageUrl" :src="imageUrl" class="avatar" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </template> <style scoped> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9 !important; /* 使用重要声明强制生效 */ border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; } </style> ``` --- #### 方法三：借助深穿透（Deep Selector） 对于某些嵌套较深的子元素，默认情况下无法直接被父级组件的样式所影响。此时可通过 `/deep/` 或 `>>>` 符号来解决这一问题[^3]。 > **注意**：Vue3 推荐的方式是使用 `::v-deep()` 替代旧版语法。 ```vue <template> <el-upload class="customized-upload" drag action="https://jsonplaceholder.typicode.com/posts/"> <i class="el-icon-upload"></i> <div class="el-upload__text">拖拽文件到这里或者 <em>点击上传</em></div> </el-upload> </template> <style scoped> /deep/.customized-upload .el-upload-dragger { background-color: #fafafa; border-color: #eaeaea; transition: all 0.3s ease-in-out; } /deep/.customized-upload .el-upload-dragger:hover { border-color: #409eff; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); } </style> ``` --- #### 总结 以上三种方法分别适用于不同的场景需求——从简单的类名覆盖到更复杂的深层选择器处理。具体采用哪种取决于实际项目结构以及维护成本等因素[^4]。