【伪元素画三角形】自定义进度条

饿了么的进度条的样式不能满足设计时，我们需要对进度条进行改造，我这里需要给进度条加一个圆形按钮和进度条文本，并且跟随进度条比例移动。此篇文章用于记录实现过程和思路。
示例如图：

思路：饿了么的进度条作为基础； 自定义圆形按钮定位到进度条中，自定义进度条文本定位到 进度条上方，然后将定位的x方向的位移 left 作为变量， 就能实现跟随进度条移动啦~

页面准备

首先要画出圆形按钮 和 进度条文本

<template>
  <div class="outer-container">
    <p>进度条</p>
    <div class="progressBox">
      <!-- 进度条文本 -->
      <div ref="progressTxt" class="rectangle" :class="percent > 80 ? 'txtColor' : ''" :style="`left:${rectLeft}px`">
        {{ retPercent }}%
      </div>
      <!-- 圆形按钮 -->
      <div class="cicleBox" :style="`left:${cirLeft}px`"></div>
      <el-progress
        :percentage="percent > 100 ? 100 : percent"
        :show-text="false"
        :stroke-width="6"
        :color="percent > 80 ? '#f56c6c' : '#1989fa'"
        :define-back-color="bbColor"
      >
      </el-progress>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      rectLeft: 0, // 文本位移left值
      cirLeft: 0, // 圆按钮位移left值
      percent: 100, 
      bbColor: '#000',
    }
  },
 computed: {
    retPercent() {
      return this.percent > 100 ? 100 : this.percent.toFixed(1)
    },
  },
  }
</script>

圆形按钮

 .outer-container {
  margin: 30px 0;
  padding: 10px 50px;
}
 .progressBox {
  	position: relative;
 }
  // 圆点进度条
  .cicleBox {
    position: relative;
    top: 9px;
    z-index: 2;

    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f5f9ff;
    box-shadow: 0px 0px 4px 0px rgba(8, 82, 215, 0.5);
  }

进度条文本先画出矩形，然后利用伪元素画出三角形的尖尖

 // 自定义进度矩形框框
  .rectangle {
    width: fit-content;
    padding: 2px 5px;
    border-radius: 2px;
    position: relative;
    top: 2px;
    background: #ffffff;
    font-size: 10px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #13162c;
    line-height: 14px;

    &.txtColor {
      color: #ff4a1d;
    }
  }
  // 三角形尖尖
  .rectangle:after {
    content: '';
    border: 4px solid #fff;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    width: 0px;
    height: 0px;
    position: absolute; // 相对矩形定位，需要做调整
    left: 45%;
    bottom: -8px;
  }

定位计算

定位，计算出left的值

  //方法集合
  methods: {
    init() {
      this.$nextTick(() => {
        let _width= document.querySelector('.progressBox .el-progress-bar__inner').clientWidth
        this.rectLeft = _width - this.$refs.progressTxt.offsetWidth / 2
        this.cirLeft = _width - 8  // 这个8 要调整
      })
    },
  },

测试

进度条值percent 改变，圆按钮和文本会随着进度条做跟随移动。

mounted() {
    this.init()
  },