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

封装vue3-slider-check组件 滑块验证组件 移动端手势控制_第1张图片

 封装过程

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

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

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

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

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

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

使用

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

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

你可能感兴趣的:(Vue3组件封装所遇到的问题,前端,vue.js,javascript)