vue3 slide verify
npm install vue3-slide-verify> A Vue3 plugin to slide verify Demo
`` bashinstall dependencies
npm install
Quick Start
$3
Using build tools:
`bash
npm install --save vue3-slide-verify
`$3
$3
最近发现有的朋友给我发私信,但我没来的及回复,有兴趣的朋友可以加入社群交流学习:669653069

$3
| 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 |
| offset | Number | 初始渲染时,卡片的偏移值。(可用于后端验证;从后端获取,并且成功回调中会返回滑块移动的距离) | 1.1.8 |
$3
| Event | Type | Describe | Version |
| :------: | :------: | :------: | :-----: |
| success | Function | success callback | 返回耗时和滑块移动距离参数,单位为毫秒和px |
| fail | Function | fail callback | |
| refresh | Function | 点击刷新按钮后的回调函数 | |
| again | Function | 检测到非人为操作滑动时触发的回调函数 | |
$3
$3
- 新增offset参数,支持后端传入初始渲染滑块水平位置,成功回调可以获取到滑块水平移动距离。$3
- 修复图片链接失效问题,增加文档联系方式。$3
- 修复在新版vue项目中,ts类型文件找不到的问题。$3
- 针对滑动事件增加节流操作。
- 提高性能。$3
- 在父组件里如果需要重置,可以在父组件中调用子组件refresh() 方法
`html
`
`javascript
setup() {
const block = ref(null);
// 元素挂载之后才能访问ref
onMounted(() => {
block.value.refresh();
})
return {
block,
}
}
`$3
- accuracy 精度设置
> 判断滑块与凹槽位置的误差范围值,默认取值范围为 [1, 10]。若取值不为 -1,则会开启检测非人为操作。人为操作也有可能会触发哦!
>
> 判断依据是:滑块的一系列移动坐标的平均值和方差是否相等。若相等则人为是非人为操作。
>
> 若accuracy为 -1,则表示关闭检测非人为操作,默认开启。开启之后,若检测到为非人为操作,则会触发 again 回调函数- props 中
imgs设置:
- 当imgs不传或者传空数组时,图片库默认使用第三方api提供的图片路径。可能加载缓慢;
- 当imgs传本地路径时,确保图片路径是否正确。建设传oss上的图片地址。
- 详情可参考APP.vue上的写法。或在线查看demo地址$3
参考如下写法
`vue
ref="block"
:slider-text="text"
:accuracy="accuracy"
@again="onAgain"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
>
{{ msg }}
``