vue實現一個滾動條樣式

<div class="scrollBar" v-if="roleList.length > 5">
        <div
          class="box"
          @mousedown="move"
          v-bind:style="{ width: activewidth + 'px' }"
        ></div>
      </div>

.scrollBar {
  width: 500px;
  height: 6px;
  background: #d5dbf5;
  margin: 0 auto;
  margin-top: 72px;
  border-radius: 4px;
  position: relative;

  .box {
    width: 30px;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    left: 0;
  }
  .box:hover {
    cursor: pointer;
  }
}

mounted() {
    //滾動區域寬度  我這裡是遍歷的user列表  所以我拿到列表的長度*每個li的寬度即為總寬度
    let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
    //可視區域寬度  1065   這個就是上圖中白色背景盒子的寬度
    //滑塊寬度 500為滾動條寬度  計算這個寬度是為瞭拿到滑塊可以滑動的距離 這個下面會說到
    this.activewidth = 500 * (1065 / bgWidth);
  },

move(e) {
      //獲取目標元素
      let odiv = e.target;
      // ScrollArea
      //算出鼠標相對元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      //滾動條可以滾動的距離
      let viewArea = 500 - this.activewidth;
      //滾動區域寬度
      let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
      document.onmousemove = (e) => {
        //鼠標按下並移動的事件
        //用鼠標的位置減去鼠標相對元素的位置，得到元素的位置
        let left = e.clientX - disX;
        //left < 0 表示滑塊已經到最左邊
        //或者left > viewArea  表示滑塊到最右邊
        if (left < 0 || left > viewArea) {
          //console.log("到頭瞭");
          //這個時候要清空事件 不然滑塊就劃出滾動條區域瞭
          document.onmousemove = null;
        } else {
         //滑塊的滑動距離
          odiv.style.left = left + "px";
          //滾動區域的滑動距離 = 滾動區域寬度*(滑塊滑動的距離/500)
          this.$refs.ScrollArea.style.left =
            "-" + bgWidth * left / 500 + "px";
        }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },