Vue实现多分段进度条的完成度正确计算方案

原有代码核心问题 #

• 进度比例算法错误：原有逻辑用100 / 当前值计算宽度，没有扣除前面已填满分段的占比，比如当前值为100（落在Junior+段，区间50-150），按原算法算出来宽度是1%，完全不符合预期
• 内部定义的calculationProgressBar函数只做了声明，从未实际调用，所有进度设置逻辑根本不会执行
• 仅覆盖了Junior-、Junior+两个分段的判断，Middle、Senior相关分段完全没有处理逻辑
• 硬编码选择器和判断条件，后续调整职级阈值需要改多处代码，维护成本高

正确计算逻辑 #

先明确所有职级的分段区间规则，和代码标注数值、参考效果完全对应：

• Junior -：0 ~ 50，分段长度50
• Junior +：50 ~ 150，分段长度100
• Middle -：150 ~ 200，分段长度50
• Middle +：200 ~ 300，分段长度100
• Senior -：300 ~ 350，分段长度50
• Senior +：350及以上

计算核心规则：

1. 当前值小于分段最小值：该分段填充宽度为0%
2. 当前值大于等于分段最大值：该分段填充宽度为100%
3. 当前值落在分段区间内：填充比例 = (当前值 - 分段最小值) / 分段总长度 * 100，同时给该分段的职级名称、数值标签加激活样式

修复后代码 #

首先抽离统一的分段配置，避免硬编码：

// 所有职级分段配置，调整阈值直接改这里即可
const levelConfigs = [
  {
    name: 'Junior -',
    min: 0,
    max: 50,
    barSelector: '.main__position-bar-junior-minus span',
    labelSelector: '.main__position-bar-junior-minus .main__position',
    numSelector: '.main__position-bar-junior-minus .main__position-number'
  },
  {
    name: 'Junior +',
    min: 50,
    max: 150,
    barSelector: '.main__position-bar-junior-plus span',
    labelSelector: '.main__position-bar-junior-plus .main__position',
    numSelector: '.main__position-bar-junior-plus .main__position-number'
  },
  {
    name: 'Middle -',
    min: 150,
    max: 200,
    barSelector: '.main__position-bar-middle-minus span',
    labelSelector: '.main__position-bar-middle-minus .main__position',
    numSelector: '.main__position-bar-middle-minus .main__position-number'
  },
  {
    name: 'Middle +',
    min: 200,
    max: 300,
    barSelector: '.main__position-bar-middle-plus span',
    labelSelector: '.main__position-bar-middle-plus .main__position',
    numSelector: '.main__position-bar-middle-plus .main__position-number'
  },
  {
    name: 'Senior -',
    min: 300,
    max: 350,
    barSelector: '.main__position-bar-senior-minus span',
    labelSelector: '.main__position-bar-senior-minus .main__position',
    numSelector: '.main__position-bar-senior-minus .main__position-number'
  },
  {
    name: 'Senior +',
    min: 350,
    max: Infinity,
    barSelector: '.main__position-bar-senior-plus span',
    labelSelector: '.main__position-bar-senior-plus .main__position',
    numSelector: null
  }
]

替换原有positionProgressBar方法逻辑：

positionProgressBar() {
  const currentValue = this.positionProgressValueOne / this.positionProgressValueTwo
  this.userPosition = ''

  levelConfigs.forEach(level => {
    const barEl = document.querySelector(level.barSelector)
    const labelEl = document.querySelector(level.labelSelector)
    const numEl = level.numSelector ? document.querySelector(level.numSelector) : null

    // 重置样式状态
    labelEl.classList.remove('main__position--active')
    if (numEl) numEl.classList.remove('main__position-number--active')

    if (currentValue >= level.max) {
      barEl.style.width = '100%'
    } else if (currentValue <= level.min) {
      barEl.style.width = '0%'
    } else {
      // 命中当前所在分段
      this.userPosition = level.name
      const segmentTotal = level.max - level.min
      const filled = currentValue - level.min
      barEl.style.width = `${(filled / segmentTotal) * 100}%`
      labelEl.classList.add('main__position--active')
      if (numEl) numEl.classList.add('main__position-number--active')
    }
  })

  // 处理超过最高职级阈值的情况
  if (currentValue >= 350) {
    const topLevel = levelConfigs.at(-1)
    this.userPosition = topLevel.name
    document.querySelector(topLevel.barSelector).style.width = '100%'
    document.querySelector(topLevel.labelSelector).classList.add('main__position--active')
  }
}

后续重构提示 #

你提到后续会修正直接操作DOM的问题，重构为Vue标准写法时，只需要把每个分段的填充宽度、激活状态作为响应式数据存在data或者用computed计算，模板里直接通过:style、:class绑定对应属性即可，完全不需要手动操作DOM，可维护性会明显提升。

内容的提问来源于stack exchange，提问作者Max