---

url: 'https://wot-ui.cn/component/slide-verify.md'

SlideVerify 滑动验证

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

基本用法

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

const toast = useToast()

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

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

自定义文案

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

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

自定义尺寸

通过 width 和 height 属性自定义滑动条的宽度和高度。
通过 icon-size 和 success-icon-size 属性设置对应图标大小。

<wd-slide-verify :width="250" :height="50" icon-size="60rpx" success-icon-size="30rpx" />

自定义颜色

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

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

自定义图标

通过 icon 和 success-icon 属性自定义图标，icon-size 属性设置图标大小。

<wd-slide-verify icon="arrow-right" success-icon="success" :icon-size="24" />

自定义容错范围

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

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

禁用状态

设置 disabled 属性禁用滑动验证。

<wd-slide-verify disabled />

重置方法

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

<wd-slide-verify ref="slideVerifyRef" />
<wd-button @click="handleReset">重置</wd-button>

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

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

| width | 滑动条宽度(单位:px) | number / string | - | 300 | 1.14.0 |
| height | 滑块高度(单位:px) | number / string | - | 40 | 1.14.0 |
| tolerance | 容错范围(单位:px)，距离终点多少距离内视为验证通过 | number / string | - | 10 | 1.14.0 |
| text | 提示文字 | string | - | 向右滑动验证 | 1.14.0 |
| success-text | 验证成功提示文字 | string | - | 验证通过 | 1.14.0 |
| disabled | 是否禁用 | boolean | - | false | 1.14.0 |
| background-color | 背景颜色 | string | - | #F5F7FA | 1.14.0 |
| active-background-color | 激活时的背景颜色 | string | - | #49C75F | 1.14.0 |
| icon | 滑块图标名称 | string | - | a-chevron-rightdouble | 1.14.0 |
| success-icon | 成功图标名称 | string | - | check | 1.14.0 |
| icon-size | 图标大小(单位:px) | number / string | - | 20 | 1.14.0 |
| success-icon-size | 成功图标大小(单位:px) | number / string | - | 12 | 1.14.0 |

Events

| success | 验证成功时触发 | - | 1.14.0 |
| fail | 验证失败时触发 | - | 1.14.0 |

Methods

通过 ref 可以获取到组件实例，调用组件提供的方法：

| reset | 重置验证组件到初始状态 | - | 1.14.0 |

Slots API

外部样式类