SlideVerify

Slide verification component for human-machine verification scenarios.

Component Types

Basic Usage

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

const toast = useToast()

function handleSuccess() {
  toast.success('Verification successful')
}

function handleFail() {
  toast.error('Verification failed, please try again')
}

Component States

Disabled State

Set disabled to disable slide verification.

<wd-slide-verify disabled />

Component Styles

Custom Text

Customize prompt text through text and success-text properties.

<wd-slide-verify text="Please drag the slider" success-text="Verification successful" />

Custom Colors

Customize colors through background-color and active-background-color properties.

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

Custom Icons

Customize icons through icon and success-icon properties.

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

Special Styles

Custom Tolerance Range

Set the tolerance range (in px) through the tolerance property, default is 10px.

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

Reset Method

Get the component instance through ref and call the reset method to reset the verification state.

<wd-slide-verify ref="slideVerifyRef" @success="handleSuccess" @fail="handleFail" />
<wd-button type="primary" @click="handleReset">Reset</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()
}

Slot Usage

Supports customizing content through slots.

<wd-slide-verify>
  <template #text>
    <text>Slide right to complete verification</text>
  </template>
  <template #success-text>
    <text>Verification passed</text>
  </template>
  <template #icon>
    <view>ICON</view>
  </template>
  <template #success-icon>
    <view style="color: red">OK</view>
  </template>
</wd-slide-verify>

Attributes

Parameter	Description	Type	Default Value
tolerance	Tolerance range, unit is px	number	10
text	Prompt text, displays built-in text when empty	string	''
success-text	Verification success prompt text, displays built-in text when empty	string	''
disabled	Whether to disable	boolean	false
background-color	Background color	string	-
active-background-color	Background color when active	string	-
icon	Slider icon name	string	double-right
success-icon	Success icon name	string	check-circle-fill
icon-size	Icon size	string / number	-
success-icon-size	Success icon size	string / number	-

Events

Event Name	Description	Parameters
success	Triggered when verification succeeds	-
fail	Triggered when verification fails	-

Methods

Method Name	Description	Parameters
init	Initialize size information	-
reset	Reset verification component to initial state	-

Slots

Name	Description
text	Custom prompt text content
success-text	Custom verification success prompt text content
icon	Custom slider icon
success-icon	Custom success icon

External Style Classes

Class Name	Description
custom-class	Root node style class
custom-style	Root node 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	滑块图标尺寸

Source Code

Documentation

• Component