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
disabled	Boolean	false	是否禁用	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>