Vue realizes the sliding cross effect of the ball

<template>
  <div class="about">
    <div class="box">
      <!-- Default Line -->
      <div class="Line"></div>
      <!-- Blue line -->
      <div class="slider-Line" ref="slider-Line"></div>
      <!-- Small ball on the left -->
      <div class="ball" @touchstart.prevent="fnstart"></div>
      <!-- Right ball-->
      <div class="ball ac" @touchstart.prevent="fnstart"></div>
      <!-- Numbers above -->
      <div class="num" ref="num">{{ num }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    fnstart(ev) {
      //Ball this.oDiv = ev.target;
      // pagx: the distance from the mouse click position to the leftmost side of the page offsetLeft the left side of the current element to the leftmost side of the largest box this.pageX = ev.changedTouches[0].pageX - this.oDiv.offsetLeft;
 
      document.ontouchmove = this.FnMove;
      document.ontouchend = this.FnEnd;
      //Width of the parent element this.parent = ev.target.parentNode.offsetWidth;
      // Subtract the width of the ball this.Width = this.parent - ev.target.offsetWidth;
      //Get the parent element this.parents = ev.target.parentNode;
      //Get child elements this.child = this.parents.children;
 
      // Get the ball on the right this.Right = this.parents.children[0];
      // The ball on the left this.Left = this.parents.children[1];
    },
    FnMove(ev) {
      // Subtract the distance the ball slides from the leftmost side of the element to calculate the edge of the browser this.X = ev.changedTouches[0].pageX - this.pageX;
      // console.log(this.X, 1010101);
 
      // Check if the ball is equal to zero and cannot go out if (this.X <= 0) {
        this.X = 0;
      }
      // Check if it is greater than or equal to prevent the ball from going out if (this.X > this.Width) {
        this.X = this.Width;
      }
      // Let the ball on the left slide, and the line changes color accordingly // The value above changes accordingly, and is divided into 100 parts this.xnum = this.X / 3.7;
      // Get integer this.num = parseInt(this.xnum);
      this.$refs["num"].style.left = this.X + 6 + "px";
 
 
      // Let the balls intersect without affecting each other // Dynamically monitor the left and right for (var i = 0; i < this.child.length; i++) {
        if (this.child[i].classList.contains("ball")) {
          // A total of 5 elements minus 3 is the length of the blue line
          let Len = this.child.length - 3;
          if (i == Len) {
            // The absolute value of the left ball minus the right ball is the width of the line this.dis = Math.abs( this.child[i].offsetLeft - this.child[i + 1].offsetLeft );
            //The width of the ball this.child[1].style.width = this.dis + "px";
 
            // If the value of the left ball minus the right ball is less than 0, the left of the blue line is the offsetLeft value of the left ball if (this.child[i].offsetLeft - this.child[i + 1].offsetLeft < 0) {
              this.child[1].style.left = this.child[i].offsetLeft + "px";
            } else {
              // Otherwise, it is the offsetLeft value of the ball on the right this.child[1].style.left = this.child[i + 1].offsetLeft + "px";
            }
          }
        }
      }
 
 
      this.oDiv.style.left = this.X + "px";
    },
    FnEnd() {
      document.ontouchmove = null;
      document.ontouchend = null;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  width: 400px;
  height: 30px;
  background-color: rgb(240, 16, 83);
  top: 50px;
  margin: auto;
  .ball {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: pink;
    border-radius: 50%;
    z-index: 2;
  }
  .ball.ac {
    right: 0;
    background-color: purple;
  }
  .Line {
    position: absolute;
    top: 14px;
    width: 400px;
    height: 2px;
    line-height: 30px;
    background: #ccc;
  }
  .slider-Line {
    position: absolute;
    top: 14px;
    width: 400px;
    height: 2px;
    line-height: 30px;
    background-color: blue;
  }
  .num {
    position: absolute;
    top: -19px;
    left: 9px;
  }
}
</style>