VUE 实现两个小球互推

html 部分

<template>
  <div class="about">
    <div class="box">
      <!-- 右边小球 -->
      <div class="ball ac" @touchstart.prevent="fnstart"></div>
      <!-- 左边小球 -->
      <div class="ball" @touchstart.prevent="fnstart"></div>
      <!-- 默认线 -->
      <div class="Line"></div>
      <!-- 蓝色的线 -->
      <div class="Line ac" ref="slider-Line"></div>
    </div>
  </div>
</template>

JavaScript 部分

<script>
export default {
   data(){
     return{}
   },
   methods:{
     fnstart(ev){
       this.oDiv=ev.target
        this.pageX=ev.changedTouches[0].pageX-this.oDiv.offsetLeft    

        // 父元素的宽度
      this.parent=ev.target.parentNode.offsetWidth

      // 减去小球的宽度
      this.width=this.parent-ev.target.offsetWidth

         this.parents = ev.target.parentNode;



       document.ontouchmove=this.FnMove
       document.ontouchend=this.FnEnd

     },
     FnMove(ev){
       this.X=ev.changedTouches[0].pageX-this.pageX

       if(this.X<0)this.X=0
       if(this.X>this.width)this.X=this.width

        this.$refs['slider-Line'].style.width=this.X+'px'


        // 右边小球  向左推
          if(ev.target.className.indexOf('ac')!=-1){
            this.$refs['slider-Line'].style.width=this.X-this.parents.children[1].offsetLeft+'px'
            this.pullL=this.X-30
            if(this.X<this.parents.children[1].offsetLeft+30){

              if(this.pullL<0)this.pullL=0
              if(this.X<this.parents.children[1].offsetLeft+30)this.X=this.parents.children[1].offsetLeft+30

              this.parents.children[1].style.left=this.pullL+'px'
              this.parents.children[3].style.left=this.pullL+'px'

            }

          }

          // 左边小球  向右推
          if(ev.target.className.indexOf('ac')==-1){
            this.$refs['slider-Line'].style.left=this.X+'px'
            this.$refs['slider-Line'].style.width=this.parents.children[0].offsetLeft-this.X+'px'
            this.pullR=this.X+30
            if(this.X>this.parents.children[0].offsetLeft-30){
                if(this.pullR>this.width)this.pullR=this.width
                if(this.X>this.parents.children[0].offsetLeft-30)this.X=this.parents.children[0].offsetLeft-30

                this.parents.children[0].style.left=this.pullR+'px'
            }

          }


      this.oDiv.style.left=this.X+'px'

     },
     FnEnd(){
       document.ontouchmove=null
       document.ontouchend=null

     }

   }
}
</script>

css样式部分

<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;
    background-color: blue;
    line-height: 30px;
  }
  .Line.ac {
    background: #ccc;
  }
}
</style>