修改el-upload 默认圆圈进度条样式

el-upload 是 ElementUI 中的一个上传组件，它默认提供了圆圈进度条来显示上传进度。但是有时候我们可能需要更加个性化的样式来满足自己的需求。那么如何修改 el-upload 默认圆圈进度条样式呢？

要修改 el-upload 默认的圆圈进度条样式，需要使用 scoped slots 来自定义进度条样式。具体操作如下：

1. 在 el-upload 组件中添加 scoped slots 属性，指定对应的插槽名称。

<el-upload
  class="upload-demo"
  action="/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :before-upload="handleBeforeUpload"
  :disabled="isDisabled"
  :show-file-list="showFileList"
  :on-success="handleSuccess"
  :on-error="handleError"
  :http-request="uploadRequest"
  :data="extraData"
  :headers="headers"
  :auto-upload="autoUpload"
  :multiple="multiple"
  :drag="drag"
  :accept="accept"
  :list-type="listType"
  :limit="limit"
  :with-credentials="withCredentials"
  :before-remove="beforeRemove"
  :on-exceed="handleExceed"
  scopedSlots={
    progress: 'custom-progress'
  }
>
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
  <div slot="trigger" class="el-upload__trigger">
    <i class="el-icon-upload"></i>
  </div>
</el-upload>

2. 定义对应的插槽，使用 <template> 标签包裹自定义的进度条样式。

<template slot="custom-progress">
  <div class="el-progress el-progress--line_vertical">
    <div class="el-progress-bar is-success is-vertical" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
      <div class="el-progress-bar__outer" style="height: 100%;">
        <div class="el-progress-bar__inner" style="height: 0%;"></div>
      </div>
    </div>
  </div>
</template>

3. 在自定义的进度条样式中添加样式，实现个性化的进度条效果。

需要注意的是，在自定义样式时需要考虑到进度条的动态变化，例如：进度条颜色、高度、宽度以及进度值等。可以使用 Vue 的响应式数据来改变样式，例如：

<template slot="custom-progress">
  <div class="el-progress el-progress--line_vertical">
    <div class="el-progress-bar is-success is-vertical" role="progressbar" :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
      <div class="el-progress-bar__outer" :style="{height: height}">
        <div class="el-progress-bar__inner" :style="{height: progress + '%', backgroundColor: color}"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
      height: '100%',
      color: 'green'
    }
  }
}
</script>

通过以上步骤，就可以自定义修改 el-upload 的默认圆圈进度条样式了。