Vue2进度条（Progress）

Vue3进度条（Progress）

可自定义设置以下属性：

• 进度条总宽度（width），默认600px
• 当前进度（progress），默认36
• 进度条线的宽度（strokeWidth），默认8px
• 是否显示进度数值或状态图标（showInfo），默认true

效果如下图：

①创建进度条组件Progress.vue:

<template>
  <div class="m-progress" :style="`width:${width}px;`">
    <div class="m-progress-outer">
      <div class="m-progress-inner">
        <div :class="['u-progress-bg', {'u-success-bg': progress >= 100}]" :style="`width: ${progress >= 100 ? 100:progress}%; height: ${strokeWidth}px;`"></div>
      </div>
    </div>
    <template v-if="showInfo"></template>
    <svg class="u-success" v-if="progress>=100" viewBox="64 64 896 896" data-icon="check-circle" aria-hidden="true" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg>
    <p class="u-progress-text" v-else>{{ progress>=100 ? 100:progress }}%</p>
  </div>
</template>
<script>
export default {
  name: 'Progress',
  props: {
    width: { // 进度条总宽度
      type: Number,
      default: 600
    },
    progress: { // 当前进度
      type: Number,
      default: 36
    },
    strokeWidth: { // 进度条线的宽度
      type: Number,
      default: 8
    },
    showInfo: { // 是否显示进度数值或状态图标
      type: Boolean,
      default: true
    }
  }
}
</script>
<style lang="less" scoped>
.m-progress {
  height: 24px;
  margin: 0 auto;
  display: flex;
  .m-progress-outer {
    width: 100%;
    .m-progress-inner {
      display: inline-block;
      width: 100%;
      background: #f5f5f5;
      border-radius: 100px;
      .u-progress-bg {
        // background: #1890FF;
        background: linear-gradient(to right, rgb(16, 142, 233), rgb(135, 208, 104));
        border-radius: 100px;
        transition: all .3s cubic-bezier(.08,.82,.17,1);
      }
      .u-success-bg {
        background: #52C41A;
      }
    }
  }
  .u-success {
    width: 16px;
    height: 16px;
    fill: #52C41A;
    margin-left: 8px;
    margin-top: 4px;
  }
  .u-progress-text {
    font-size: 16px;
    line-height: 24px;
    margin-left: 8px;
    color: rgba(0,0,0,.45);
  }
}
</style>

②在要使用的页面引入：

<Progress :width="600" :progress="36" :strokeWidth="10" :showInfo="true" />
import Progress from '@/components/Progress'
components: {
    Progress
}