vue3中使用 vue3-slide-verify 滑块验证登录

前言 

在vue3中引用 vue3-slide-verify组件去做滑块

gitee地址：vue3-slide-verify

在线demo： 在线查看demo地址

目录

 一、安装npm依赖

二、使用方法

argument

callBack

description

 三、新建组件slideVerify

四、父组件调用

五、展示示例 

---

 一、安装npm依赖

npm install --save vue3-slide-verify

二、使用方法

argument

Param	Type	Describe	Version
l	Number	block length
r	Number	block circle radius
w	Number	canvas width
h	Number	canvas height
sliderText	String	Slide filled right
imgs	Array	picture array 背景图数组，默认值 []
accuracy	Number	滑动验证的误差范围，默认值 5
show	Boolean	是否显示刷新按钮，默认值 true
interval	Number	节流函数的时间间隔，默认值 50	1.1.2

callBack

Event	Type	Describe	Version
success	Function	success callback	返回时间参数，单位为毫秒
fail	Function	fail callback
refresh	Function	点击刷新按钮后的回调函数
again	Function	检测到非人为操作滑动时触发的回调函数

description

• accuracy 精度设置

判断滑块与凹槽位置的误差范围值，默认取值范围为 [1, 10]。若取值不为 -1，则会开启检测非人为操作。人为操作也有可能会触发哦！

判断依据是：滑块的一系列移动坐标的平均值和方差是否相等。若相等则人为是非人为操作。

若accuracy为 -1，则表示关闭检测非人为操作，默认开启。开启之后，若检测到为非人为操作，则会触发 again 回调函数

• props 中 imgs设置：
  • 当imgs不传或者传空数组时，图片库默认使用第三方api提供的图片路径。可能加载缓慢；
  • 当imgs传本地路径时，确保图片路径是否正确。建设传oss上的图片地址。
  • 详情可参考APP.vue上的写法。

 三、新建组件slideVerify

四、父组件调用

五、展示示例