SlideVerify 滑动验证

用户拖动滑块与目标位置对齐，组件按误差范围判断结果。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 滑动验证 -->
<fui-slide-verify ref="verifyRef" @success="handleSuccess" @fail="handleFailure" />

属性

属性	类型	说明	官网默认值
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
sliderWidth	Number / String	滑块宽度，单位 rpx	80
sliderBgColor	String	滑块背景色	#FFFFFF
borderColor	String	滑块边框色	#EEEEEE
passColor	String	通过时边框和对勾颜色	#465CFF
size	Number / String	提示字号，单位 rpx	28
color	String	提示文字颜色	#333333
activeColor	String	通过后的提示文字颜色	#FFFFFF
iconSize	Number / String	箭头和对勾大小，单位 rpx	48
arrowColor	String	箭头颜色	#B2B2B2
lineColor	String	目标虚线颜色	#B2B2B2

事件

事件	说明	回调参数
success	验证通过	{}
fail	验证失败	{}

实例的 reset() 可重置验证。非 nvue 默认主色可通过 --fui-color-primary 配置；业务验证结果仍应由服务端校验。

插槽

插槽	说明
—	官网未列出该组件的插槽