工作实例记录-可拖动的进度条

// 自定义进度条组件
<template>
  <div id='customProgress'>
    <div class="customProgress-list">
      <div class="customProgress-item">
        <span>沟通难易</span>
        <div id='parentProgress' class="customProgress-content">
          <div class="customProgress-line">
            <div id='progress1' class="customProgress-icon"></div>
          </div>
        </div>
        <span>难</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'customProgress',
  props: {
    impressionAverage: { /* 客户平均印象对象 */
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    /* 设置鼠标拖动进度条事件 */
    setProgress () {
      let proDiv = document.getElementById('progress1')
      proDiv.addEventListener('mousedown', (ev) => {
        /* 解决event兼容行 */
        let ev1 = ev || event

        /* 获取元素到父元素的距离 */
        let ol = proDiv.offsetLeft
        
        /* 获取元素当前的x坐标 */
        let cx1 = ev1.clientX

        document.onmousemove = (ev) => {
          let ev2 = ev || event
          /* 获取鼠标移动后的坐标 */
          let cx2 = ev2.clientX

          /* 计算鼠标移动距离 */
          let x = cx2 - cx1

          /* 计算元素移动的距离 */
          let ls = x + ol + 10

          /* 如果元素移动的距离超过了父元素的宽度  则 停止计算 */
          let parentWidth = window.getComputedStyle(document.getElementById('parentProgress')).width.replace('px', '')
          if (ls > 7 && ls <= Number(parentWidth)) {
            document.getElementsByClassName('customProgress-line')[0].style.width = ls + 'px'
          }
        }

        document.onmouseup = () => {
          document.onmousemove = null
        }
      })
    }
  },
  mounted () {
    this.setProgress()
  }
}
</script>

<style lang="less">
#customProgress {
  .customProgress-item {
    display: flex;
    align-items: center;
    margin-top: 20px;
    font-size: 12px;
    > span:nth-of-type(1) {
      margin-right: 15px;
      color: rgba(155, 155, 155, 1);
    }
    > span:nth-of-type(2) {
      margin-left: 15px;
      color: rgba(102, 102, 102, 1);
    }
  }
  .customProgress-content {
    width: 500px;
    height: 4px;
    background-color: rgba(216, 216, 216, 1);
    position: relative;
    border-radius: 2px;
    .customProgress-line {
      height: 100%;
      width: 100px;
      background: linear-gradient(to right, rgba(57, 208, 189, 1), rgba(22, 119, 255, 1));
      border-radius: 2px;
      position: relative;
      .customProgress-icon {
        position: absolute;
        top: -4px;
        right: 0;
        height: 6px;
        width: 6px;
        border: 3px solid rgba(41, 120, 237, 1);
        border-radius: 6px;
        background-color: #FFF;
        cursor: pointer;
      }
    }
  }
}
</style>