封装vue3-slider-check组件 滑块验证组件 移动端手势控制

 封装过程

这边先来讲讲封装滑块验证组件所需要的过程与素材。滑块验证一般是由一张基础图片与一张滑动图片组成。一般来说当判断滑动图片与基础图片重叠拼成一张完整图片的时候结束判断。

所以我们需要的素材有：n对底图与滑动图片，成功的图片、失败的图片、滑动过程的图片、未滑动的图片（img,svg都可以）

然后我们要对鼠标的滑动与按下松开等操作进行监听。我这边进行的是移动端的组件封装，所以不进行pc端的监听操作了。

首先我们需要监听箭头所在的div的按下监听，代表用户将要滑动滑块知道鼠标松开。

然后需要监听整个页面的鼠标移动，因为用户有时候手指并不会一直在滑块那一行。然后记录下滑动的位置，将滑块与滑动图片的位置移动到相同的x轴所在位置。

最后监听鼠标的弹起。判断如果用户在此之前的状态是按下滑动，就判断是否验证成功。

<div class="sliderArrow"
     @touchstart="mouseDown($event)"
     ref="sliderArrow">
     <img src="/sliderImg/rightArrow.png" class="sliderArrow_Img" ref="sliderArrow_img">
</div>    
<script setup>
const sliderArrowDown = ref(false)//用来判断滑块状态 false为停止 true为滑动中
//监听div的按下但未松开的操作
const mouseDown = (e)=>{
  sliderArrowDown.value = true;
}
//在初始化页面之后监听鼠标的移动与鼠标的松开
onMounted(() => {
  document.ontouchmove=function(e)  //鼠标移动事件
  {
    if(sliderArrowDown.value) {
      addLeftViewClass();//给滑块添加一个移动的css样式
        //记录下滑动的位置与验证框的位置，不要让滑块随着移动跑出验证范围
      let maxWidth = container.value.getBoundingClientRect().left+container.value.clientWidth;
      let x = e.changedTouches[0].pageX>maxWidth?maxWidth:e.changedTouches[0].pageX;
      let position = (x-sliderArrow.value.clientWidth-container.value.getBoundingClientRect().left)>0?(x-sliderArrow.value.clientWidth-container.value.getBoundingClientRect().left):0;
    //同过css改变滑块的位置
      leftView.value.style.width = position+"px";
      sliderArrow.value.style.marginLeft = position+"px";
      sliderImg.value.style.left = position+"px";
    }
  }
  document.ontouchend=function(e)   //鼠标弹起事件
  {
    let left = e.changedTouches[0].pageX;//记录手指弹起的位置
    let scrollLength = Number(sliderArrow.value.style.marginLeft.replace("px",""))//滑动的距离
    if(sliderArrowDown.value){
//允许误差范围1.5%
      let checkTemp = Math.abs(scrollLength/container.value.clientWidth-leftWidth.value)<=0.015;
//检查成功 显示0.5s成功样式 然后通知外部验证成功
      if(checkTemp)
      {
        successLeftViewClass()
        setTimeout(()=>{
          emit("success")
        },500)
      }
      else{
        errorLeftViewClass()//验证错误
      }
    }
    sliderArrowDown.value = false;
  }
})
</script>

使用

需要使用的可以直接在vue3项目中 npm install vue3-slider-check

可以在vue3-slider-check - npm查看使用。后续会将代码上传至github