Vue封装一个刻度尺组件,可滑动,显示刻度设置默认刻度

 <div ref="Hello" class="c-slide f-inline-block" @mousemove="mousemove" @click="a">
      <div class="slide-runway"  ref="name"  >
        <div class="slide-bar" ref="bar" :style="{width: x}"></div>
        <div class="c-slide-button slide-btn"  ref="tu" :style="{left:x}"  @mousedown="move">
          <div class="c-slide-tooltip tooltip" >
            {{title}}
          </div>
        </div>
      </div>
      <div class="slide-rule f-cl" style="display:flex">
        <span class="rule f-fl" style="width: 10%;">130以下</span>
        <span class="rule f-fl rule-bg" style="width: 10%;" v-for="item in data" :key="item">{{item}}</span>               
        <span class="rule f-fl " style="width: 10%;">210以上</span>
      </div>   
    </div>

实现效果

js部分

//设置默认数据
    Initial() {
      //初始化获取元素宽度
      let TotalWidth = this.$refs.name.clientWidth;
      //将数据划分
      let PerWidth = TotalWidth / 100;
      //调用默认身高
      this.linearAnimation(PerWidth, PerWidth * 40);
    },
    //初始化自动移动
    linearAnimation(step, target) {
      let intervalID = null;
      let begin = 0,
        step_len = step || 0;
      clearInterval(intervalID);
      intervalID = setInterval(() => {
        begin += step_len;
        if (begin >= target) {
          begin = target;
          clearInterval(intervalID);
        }
        // box.style.marginLeft = begin + "px";
        this.$refs.bar.style.width = begin + "px";
        this.$refs.tu.style.left = begin + "px";
        this.CalculatedWidth(begin);
      }, 50);
    },
    //计算实际所占比(显示框)
    CalculatedWidth(w) {
      //初始化获取元素宽度
      let TotalWidth = this.$refs.name.clientWidth;
      console.log("初始化h", TotalWidth);
      //将数据划分
      let PerWidth = TotalWidth / 100;
      //小小格子
      let smallWidth = PerWidth / 10;
      // 实际占比 实占多少格
      let WWidth = parseInt(w / PerWidth);

      //判断区间
      if (w <= PerWidth * 10) {
        this.title = "小于130";
        return;
      } else if (w >= PerWidth * 90) {
        this.title = "大于210";
        return;
      } else if (WWidth >= WWidth + PerWidth / 2) {
        WWidth = WWidth + 1;
        this.title = WWidth + 120 + "cm";
        return;
      } else if (WWidth <= WWidth + PerWidth / 2) {
        WWidth = WWidth;
        this.title = WWidth + 120 + "cm";
        return;
      } else if (WWidth == WWidth) {
        this.title = WWidth + 120 + "cm";
        return;
      }
    },
    move(event) {
      let odiv = event.target; //获取目标元素
      let fdiv = odiv.parentNode;
      let xdiv = fdiv.firstChild;
      let tdiv = this.$refs.tu;
      let disX = event.clientX - odiv.offsetLeft;
      document.onmousemove = e => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        //获取实际宽度
        let OriginalWidth = this.$refs.name.clientWidth;
        if (left <= OriginalWidth && left >= 0) {
          this.CalculatedWidth(left);
          let bfb = left / OriginalWidth + "%";
          let a = this.mousemove(event);
          let z = a + "%";
          this.x = z;
          //移动当前元素
          xdiv.style.width = left + "px";
          tdiv.style.left = left + "px";
        }
      };

      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    a(event) {
      //获取
      let a = this.mousemove(event);
      if (event.offsetX == a) {
        event.offsetX == event.offsetX;
      }
      this.CalculatedWidth(event.offsetX);
      let z = a + "%";
      this.x = z;
    },
    mousemove(event) {
      //获取实际宽度
      let OriginalWidth = this.$refs.name.clientWidth;
      let a = event.offsetX;
      let c = a / OriginalWidth;
      let d = (c * 100).toFixed(4);
      let realVal = parseFloat(d).toFixed(4);
      if (realVal >= 100) return realVal == 100;
      return realVal;
    }

css样式

* {
  box-sizing: border-box;
}
.f-inline-block {
  display: inline-block;
}
.a {
  height: 16px;
  padding: 10px;
  background-color: #4d4d4d;
}

.f-cl:after,
.f-cl:before {
  display: table;
  content: "";
}
.f-cl:after {
  clear: both;
}
.f-cl:before {
  clear: both;
}
.f-fl {
  float: left;
}
.c-slide {
  user-select: none;
  background-color: #f4f4f4;
  border-radius: 4px;
  width: 510px;
  height: 100px;
  cursor: pointer;
  padding: 14px 14px 0;
}
.c-slide .slide-runway {
  width: 100%;
  height: 6px;
  position: relative;
  background-color: #d8d8d8;
}
.c-slide .slide-bar {
  height: 6px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #9463f7;
  z-index: 1;
}
.c-slide .slide-btn {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  z-index: 2;
}
.c-slide .rule {
  display: block;
  float: left;
  color: #333333;
  font-size: 11px;
  padding: 2px 0 0 3px;
  line-height: 14px;
}
.c-slide .rule:last-child {
  position: relative;
}
.c-slide .rule:last-child::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 10px;
  border-left: 1px solid #4d4d4d;
  top: 0;
  left: 0;
}
.c-slide .rule-bg {
  background: url(../assets/images/rule.079996f.png) no-repeat;
}
.c-slide-button {
  border: 3px solid #9463f7;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
}
.c-slide-button .tooltip {
  transform: translate(-46%, -150%);
}
.c-slide-tooltip {
  padding: 5px;
  box-shadow: 0px 0px 4px 0px rgba(163, 163, 163, 0.36);
  border-radius: 4px;
  background-color: #fff;
  display: inline-block;
  color: #333333;
  white-space: nowrap;
  font-size: 12px;
  position: absolute;
}
.c-slide-tooltip:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  border-left-color: #fff;
  border-bottom-color: #fff;
  transform: rotate(-45deg) translateX(-50%);
  bottom: 0px;
  box-shadow: -1px 1px 4px 0px rgba(163, 163, 163, 0.36);
  left: 50%;
}

《程序员》曾陪伴了无数开发者成长。《新程序员》全新归来，推荐给大家！
结语:

不管多么险峻的高山，总是为不畏艰难的人留下一条攀登的路。