SliderVerify 滑块验证

滑块验证常用于注册、登录、代替确认对话框、短信发送等场景。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
height	Number,String	100rpx	组件高度	All
text	String	拖动滑块验证	未激活文字提示	All
textProps	Object	{}	未激活文字样式 参考c-text的props	All
activeText	String	验证成功	激活文字提示	All
activeTextProps	Object	{}	激活文字样式 参考c-text的props	All
textOffset	Number,String	null	文本位置的偏移量	All
icon	String	arrow-double-right	未激活的图标	All
iconProps	Object	{}	图标样式 参考c-icon的props	All
activeIcon	String	success-fill	激活图标	All
activeIconProps	Object	{}	激活图标样式 参考c-icon的props	All
bgBoxProps	Object	{}	未激活背景框样式 参考c-box的props	All
activeBgBoxProps	Object	{}	激活背景框样式 参考c-box的props	All
handleProps	Object	{}	未激活手柄的样式 参考c-box的props	All
activeHandleProps	Object	{}	未激活手柄的样式 参考c-box的props	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明	平台
change	{state,count} state状态：start,cancel,success count：重试次数	All

插槽

插槽名	说明
default	背景插槽，参数active：是否激活
text	文本插槽，参数active：是否激活
icon	图表插槽，参数active：是否激活

方法

方法名	说明
reset	重置

示例

<template>
    <c-slider-verify @change="onChange" />
</template>
<script setup>
function onChange(e){
    if(e.state === 'success'){
        console.log('验证通过')
    }
}
</script>