SlideVerify 滑动验证

滑动验证组件，用于人机验证场景。

组件类型

基本用法

<wd-slide-verify @success="handleSuccess" @fail="handleFail" />

const toast = useToast()

function handleSuccess() {
  toast.success('验证成功')
}

function handleFail() {
  toast.error('验证失败，请重试')
}

组件状态

禁用状态

设置 disabled 后禁用滑动验证。

<wd-slide-verify disabled />

组件样式

自定义文案

通过 text 和 success-text 属性自定义提示文字。

<wd-slide-verify text="请拖动滑块" success-text="验证成功" />

自定义颜色

通过 background-color 和 active-background-color 属性自定义颜色。

<wd-slide-verify background-color="#E8F4FF" active-background-color="#4D94FF" />

自定义图标

通过 icon 和 success-icon 属性自定义图标。

<wd-slide-verify icon="arrow-right" success-icon="thumb-up-fill" />

特殊样式

自定义容错范围

通过 tolerance 属性设置容错范围（单位：px），默认为 10px。

<wd-slide-verify :tolerance="20" />

重置方法

通过 ref 获取组件实例，调用 reset 方法重置验证状态。

<wd-slide-verify ref="slideVerifyRef" @success="handleSuccess" @fail="handleFail" />
<wd-button type="primary" @click="handleReset">重置</wd-button>

import { ref } from 'vue'
import type { SlideVerifyInstance } from '@/uni_modules/wot-ui/components/wd-slide-verify/types'

const slideVerifyRef = ref<SlideVerifyInstance>()

function handleReset() {
  slideVerifyRef.value?.reset()
}

插槽用法

支持通过插槽自定义内容。

<wd-slide-verify>
  <template #text>
    <text>向右滑动完成验证</text>
  </template>
  <template #success-text>
    <text>验证通过</text>
  </template>
  <template #icon>
    <view>ICON</view>
  </template>
  <template #success-icon>
    <view style="color: red">OK</view>
  </template>
</wd-slide-verify>

Attributes

参数	说明	类型	默认值
tolerance	容错范围，单位为 px	number	10
text	提示文字，为空时显示内置文案	string	''
success-text	验证成功提示文字，为空时显示内置文案	string	''
disabled	是否禁用	boolean	false
background-color	背景颜色	string	-
active-background-color	激活时的背景颜色	string	-
icon	滑块图标名称	string	double-right
success-icon	成功图标名称	string	check-circle-fill
icon-size	图标大小	string / number	-
success-icon-size	成功图标大小	string / number	-

Events

事件名称	说明	参数
success	验证成功时触发	-
fail	验证失败时触发	-

Methods

方法名	说明	参数
init	初始化尺寸信息	-
reset	重置验证组件到初始状态	-

Slots

name	说明
text	自定义提示文字内容
success-text	自定义验证成功提示文字内容
icon	自定义滑块图标
success-icon	自定义成功图标

外部样式类

类名	说明
custom-class	根节点样式类
custom-style	根节点样式

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-slide-verify-height	$n-40	组件高度
--wot-slide-verify-width	100%	组件宽度
--wot-slide-verify-bg	$filled-bottom	组件背景色
--wot-slide-verify-radius	$radius-large	圆角
--wot-slide-verify-track-bg	$success-main	成功态track背景色
--wot-slide-verify-disabled-opacity	$opacity-disabled	禁用态透明度
--wot-slide-verify-text-color	$text-main	提示文字颜色
--wot-slide-verify-text-font-size	$typography-label-size-main	提示文字字号
--wot-slide-verify-text-line-height	$typography-label-line--height-size-main	提示文字行高
--wot-slide-verify-success-text-color	$text-white	成功态文字颜色
--wot-slide-verify-button-bg	$filled-oppo	滑块背景色
--wot-slide-verify-button-shadow	$n-0 $n-2 $n-8 $opac-4_15	滑块阴影色
--wot-slide-verify-button-color	$icon-secondary	滑块图标颜色
--wot-slide-verify-button-success-color	$success-main	滑块图标成功态颜色
--wot-slide-verify-button-size	$slide-verify-height	滑块尺寸
--wot-slide-verify-button-border-color	$border-light	滑块边框颜色
--wot-slide-verify-success-icon-size	$n-20	滑块图标尺寸

源代码

文档

• 组件