vue的小球碰撞

<template>
  <div class="slide">
    <div class="content" ref="content">
      <div class="line" ref="line"></div>
      <!-- 第一个圆 -->
      <div class="one" ref="one" @touchstart="Fnstart"></div>
      <!-- 第二个圆 -->
      <div class="one ac" ref="two" @touchstart="Fnstart"></div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {};
  },
  methods: {
    Fnstart(e) {
      this.startx = e.changedTouches[0].pageX - e.target.offsetLeft;
      this.one = this.$refs["one"];
      this.two = this.$refs["two"];
      this.content = this.$refs["content"];

      document.ontouchmove = this.Fnmove;
      document.ontouchend = this.FnEnd;
    },
    Fnmove(e) {
      this.X = e.changedTouches[0].pageX - this.startx;
      if (this.X < 0) this.X = 0;
      if (this.X > this.content.offsetWidth )
        this.X = this.content.offsetWidth ;
      e.target.style.left = this.X + "px";

      this.$refs["line"].style.left = this.one.offsetLeft + "px";
      this.$refs["line"].style.width =
        this.two.offsetLeft - this.one.offsetLeft + "px";

      if (e.target.className.indexOf("ac") == -1) {
        if (this.one.offsetLeft + e.target.offsetWidth >= this.two.offsetLeft) {
          if (this.X > this.content.offsetWidth - e.target.offsetWidth * 2)
            this.X = this.content.offsetWidth - e.target.offsetWidth * 2;
          this.one.style.left = this.X + "px";
          this.two.style.left = this.X+e.target.offsetWidth + "px";
        }
      }
      if (e.target.className.indexOf("ac") != -1) {
        if (this.two.offsetLeft - e.target.offsetWidth <= this.one.offsetLeft) {
          if (this.X < e.target.offsetWidth) this.X = e.target.offsetWidth;
          this.one.style.left = this.X - e.target.offsetWidth + "px";
          this.two.style.left = this.X + "px";
        }
      }
    },
    FnEnd() {
      document.ontouchmove = null;
      document.ontouchend = null;
    },
  },
};
</script>
<style lang="less">
body {
  margin: 0;
}
.slide {
  .content {
    position: relative;
    width: 600px;
    height: 3px;
    background: #ebedf0;
    top: 200px;
    left: 0;
    margin: auto;
    .line {
      position: absolute;
      width: 600px;
      height: 5px;
      background: #1989fa;
      top: 0;
      left: 0;
      margin: auto;
    }
    // 第一个圆
    .one {
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 2px rgb(0, 0, 0, 0.5);
      .tips {
        position: absolute;
        left: 8px;
        margin-top: 50px;
        color: #1989fa;
        font-size: 20px;
      }
    }
    // 第二个圆
    .one {
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 2px rgb(0, 0, 0, 0.5);
    }
    .one.ac {
      left: 560px;
      background: #fff;
    }
  }
}
</style>