.el-upload 怎么改变样式

### 修改 `.el-upload` 样式的方法

为了自定义 Element UI 中 `.el-upload` 组件的样式，可以采用多种方式来覆盖默认样式并应用新的设计。

#### 方法一：全局 CSS 覆盖
通过编写更具体的 CSS 类选择器，在项目中的公共样式表里添加如下代码：

/* 使用更高优先级的选择器 */
.el-upload {
    /* 自定义属性 */
    width: 200px;
    height: 150px;
}

/* 如果需要进一步定制内部结构 */
.el-upload__text {
    color: red;
}

这种方法适用于整个应用程序中所有的 `el-upload` 实例都会受到影响的情况[^1]。

#### 方法二：作用域内 SCSS 或者 CSS Modules
如果只想影响特定页面上的上传按钮，则可以在单文件组件 (SFC) 的 `<style scoped>` 块中定义局部样式规则。对于 Vue CLI 创建的应用程序来说，推荐使用这种方式以避免不必要的副作用。

<style lang="scss" scoped>
.custom-class >>> .el-upload { /* 使用深类选择符穿透子组件 */
    background-color: blue !important; /* 强制重写背景颜色 */
    
    &__input {
        display: none!important; /* 隐藏原生 input 元素 */
    }
}
</style>

<template>
<div class="custom-class">
    <!-- 这里的 upload 将会受到上面样式的控制 -->
    <el-upload></el-upload>
</div>
</template>

注意这里使用的 `>>>` 符号是为了让父组件内的样式能够应用于子组件元素上；而在某些版本或配置下可能需要用 `/deep/` 替代它。

#### 方法三：利用插槽 Slot 完全重构布局
当希望完全改变上传区域的设计而不仅仅是调整一些简单的CSS 属性时，可以通过模板插槽来自由构建 HTML 结构，并配合 JavaScript 控制逻辑完成更加复杂的交互需求。

<!-- template -->
<el-upload :show-file-list="false"
           ref="uploadRef"
           action=""
           @change="handleChange">
    <button type="button">点击上传</button> <!-- 可自由设置触发按钮外观 -->
</el-upload>

在这个例子中，隐藏了默认显示的文件列表 (`show-file-list`) 并清空了 `action` URL 来阻止自动提交行为。同时监听 change 事件以便手动处理文件选择后的业务流程[^2]。