SlideVerify 滑动验证码
SlideVerify 滑动验证码，根据提示进行行为验证。
# 支持平台
| App（vue） | App（nvue） | H5 | 小程序 |
|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ |
# 左下方动画
@success 事件当验证通过时触发，@fail 事件当验证失败时触发。
<wui-slide-verify @success="success" @fail="fail"></wui-slide-verify>
//methods
const success = ()=> {
Toast('验证通过！')
}
const fail = () => {
Toast('验证失败！')
}
# 调整样式
通过 background 属性设置滑动条背景色， activeBgColor 属性设置滑块滑过区域背景颜色，passColor 属性设置通过验证后滑块边框颜色以及对号图标颜色，lineColor 属性目标虚线框边框颜色。
<wui-slide-verify background="rgba(9, 190, 79, .05)" activeBgColor="#09BE4F" passColor="#09BE4F" lineColor="#FFB703" @success="success" @fail="fail"></wui-slide-verify>
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| range | Number, String | 误差范围，距离目标（虚线框）位置偏差最大值，单位px | 3 | - |
| error | Number, String | 验证失败多少次进行重置目标（虚线框）位置 | 3 | - |
| width | Number, String | 滑动条宽度，单位rpx | 640 | - |
| height | Number, String | 滑动条高度，单位rpx | 80 | - |
| background | String | 滑动条背景色 | #EEEEEE | - |
| activeBgColor | String | 滑块滑过区域背景颜色 | #465CFF | 非Nvue端默认为空，可通过css变量（--wui-color-primary）来改变颜色值 |
| sliderWidth | Number, String | 滑块宽度，单位rpx | 80 | - |
| sliderBgColor | String | 滑块背景颜色 | #FFFFFF | - |
| borderColor | String | 滑块边框颜色 | #EEEEEE | - |
| passColor | String | 通过验证后滑块边框颜色以及对号图标颜色 | #465CFF | 非Nvue端默认为空，可通过css变量（--wui-color-primary）来改变颜色值 |
| size | Number, String | 提示文字大小，单位rpx | 28 | - |
| color | String | 提示文字颜色 | #333333 | - |
| activeColor | String | 验证通过后提示文字颜色 | #FFFFFF | - |
| iconSize | Number, String | 箭头与对号图标字体大小，单位rpx | 48 | - |
| arrowColor | String | 箭头图标颜色 | #B2B2B2 | - |
| lineColor | String | 目标虚线框边框颜色 | #B2B2B2 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @success | 验证通过时触发（滑块与虚线框重合偏差距离小于等于误差范围） | { } |
| @fail | 验证失败时触发（滑块与虚线框重合偏差距离大于误差范围） | { } |
# Methods
通过ref属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。
| 方法名 | 说明 | 传入参数 | 返回参数 |
|---|---|---|---|
| reset | 重置滑动验证码 | - | - |