el-upload样式改变

### 自定义 Element UI `el-upload` 组件的样式

为了自定义 `el-upload` 组件的样式，可以通过多种方式来实现这一目标。一种常见的方式是在全局或局部范围内覆盖默认样式；另一种则是利用 scoped CSS 或者更深入地通过 JavaScript 动态调整样式。

#### 使用外部CSS类名覆盖默认样式

可以在引入 `el-upload` 的地方为其指定特定的 class 名字，并在项目的公共样式表中针对该 class 定义新的样式规则：

<template>
  <div>
    <!-- 添加 customClass 到 el-upload -->
    <el-upload class="custom-upload-class">
      ...
    </el-upload>
  </div>
</template>

<style lang="scss">
/* 在此定义 .custom-upload-class 下的相关样式 */
.custom-upload-class {
  /* 修改按钮颜色 */
  button.el-button--primary {
    background-color: #ff7e35;
    border-color: transparent;
  }
  
  /* 更改字体大小 */
  span {
    font-size: 18px !important;
  }

  /* 调整整体宽度 */
  width: 200px;

}
</style>

这种方式适用于想要统一更改所有上传控件外观的情况[^1]。

#### 局部作用域内的样式定制 (Scoped Styles)

对于单个组件内部样式的修改，推荐使用 Vue 单文件组件中的 `<style scoped>` 特性。这能确保所写的 CSS 只影响当前组件而不干扰其他部分:

<template>
  <el-upload v-bind="$attrs" class="local-customized-upload"></el-upload>
</template>

<script setup>
// script content here...
</script>

<style scoped>
.local-customized-upload {
  display: inline-block;
  vertical-align: top;
}

.local-customized-upload .el-upload-dragger {
  height: auto;
  padding-bottom: 0;
}

.local-customized-upload .el-icon-plus:before {
  color: red;
}
</style>

这种方法能够有效防止样式泄露至父级或其他兄弟组件[^2].

#### 深度选择器 Deep Selector (`>>>`) 和 BEM 命名法

当需要更加精细控制子元素样式时，可以采用深度选择器（如 `>>>`, `/deep/`, or `::v-deep`），这些语法允许穿透 shadow DOM 达到更深一层的选择效果。另外配合BEM命名约定可以使代码更具可读性和维护性：

.deep-selector-example >>> .el-upload__input {
  opacity: 0;
}

.bem-naming-convention .block__element--modifier {
  property: value;
}

需要注意的是，在不同的构建工具和版本间深选符的支持情况可能有所差异，请参照实际使用的框架文档确认最佳实践[^3].

#### 结合JavaScript动态设置内联样式

除了静态声明外，还可以借助于JS操作DOM节点属性的方法来自由设定样式特性。比如响应某些事件触发后的即时变化需求：

methods: {
  handleExceed(files, fileList) {
    const file = files[0];
    let reader = new FileReader();
    
    // 设置背景图片为预览图
    reader.onloadend = () => {
      document.querySelector('.target-element').style.backgroundImage = 'url(' + reader.result + ')';
    };
    reader.readAsDataURL(file.raw);
  },
},

上述例子展示了如何监听超出数量限制时改变某个 HTML 元素的背景图像[^4].