vue登录时人机验证-滑块验证（触屏滑动）

文章基于《vue登录时人机验证-滑块验证》实现触屏滑动

触屏滑动方法如下：

//触摸移动
touchMove(e) {
   let ele = e.target
   let one = e.targetTouches[0]
   let startX = one.clientX
   let eleWidth = ele.offsetWidth
   let parentWidth = ele.parentElement.offsetWidth
   let MaxX = parentWidth - eleWidth
   if (this.rangeStatus) {
     //不运行
     return false
   }
   document.ontouchmove = e => {
     let endX = e.targetTouches[0].clientX
     this.disX = endX - startX
     if (this.disX <= 0) {
       this.disX = 0
     }
     if (this.disX >= MaxX - eleWidth) {
       //减去滑块的宽度,体验效果更好
       this.disX = MaxX
     }
     ele.style.transition = '.1s all'
     ele.style.transform = 'translateX(' + this.disX + 'px)'
   }
   document.ontouchend = () => {
     if (this.disX !== MaxX) {
       ele.style.transition = '.5s all'
       ele.style.transform = 'translateX(0)'
       //执行成功的函数
       this.errorFun && this.errorFun()
     } else {
       this.rangeStatus = true
       if (this.status) {
         this.$parent[this.status] = true
       }
       //执行成功的函数
       this.successFun && this.successFun()
     }
     document.ontouchmove = null
     document.ontouchend = null
   }
 }