vue3-slide-verify

> A Vue3 plugin to slide verify Demo

Build Setup

`` bash


install dependencies

npm install

serve with hot reload at localhost:8080

npm run dev

build for production with minification

npm run build
`

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


``