el-upload__text和el-upload el-upload--text上下换位置

### 调整 Element UI 中 `el-upload` 组件文本显示区域与整体样式的布局

为了交换 `el-upload` 组件中的 `.el-upload__text` 和 `.el-upload--text` 的位置，可以通过自定义 CSS 或者修改模板结构来实现。以下是两种不同的解决方案：

#### 方法一：通过自定义CSS调整顺序

如果仅需视觉上改变两者的位置而不改动HTML结构，可以利用绝对定位或Flexbox布局属性。

/* 使用 Flex 布局 */
.el-upload {
    display: flex;
    flex-direction: column-reverse; /* 反转子元素排列方向 */
}

/* 如果有其他样式需求可继续补充 */

这种方法简单快捷，适用于不需要大幅度更改原有DOM树的情况[^1]。

#### 方法二：重写模板结构调整层次关系

对于更复杂的场景，可能需要直接操作Vue组件内部的slot插槽来自定义内容展示方式。这通常涉及到创建一个新的包裹容器，并在此基础上构建所需的UI逻辑。

<template>
  <div class="custom-upload">
    <!-- 自定义文本 -->
    <span slot="tip" class="el-upload__tip">将文件拖到此处...</span>

    <!-- 文件列表和其他交互控件保持默认行为 -->
    <el-upload :action="uploadUrl" ... >
      <!-- 默认插槽用于放置触发按钮或其他提示信息 -->
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<style scoped lang="scss">
.custom-upload{
  .el-upload__tip{/* 样式定制 */}
}
</style>

此方案提供了更大的灵活性，允许开发者完全掌控上传区内的各个部分是如何组合在一起的[^2]。

需要注意的是，在实际开发过程中应当充分考虑用户体验以及业务逻辑的一致性，确保任何界面变化都不会影响功能正常使用。