---
title: "SlideVerify"
description: "流畅的滑动验证组件。"
seo_title: "SlideVerify"
seo_description: "A smooth slide-to-verify component with configurable threshold, size and success feedback."
canonical_url: "https://nuxt.mhaibaraai.cn/docs/components/slide-verify"
---
# SlideVerify

> 流畅的滑动验证组件。

## 简介

`MSlideVerify` 是一个滑动验证组件，提供拖拽交互与状态转换动画。基于 `motion-v` 实现流畅过渡，适用于表单验证、敏感操作确认等场景。

> \[\!NOTE\]
> 
> 使用 
> 
> Motion
> 
>  动画库提供拖拽交互与状态转换动画

## 用法

按住滑块并向右拖动至阈值即可通过验证：

```vue
<script setup lang="ts">
const value = ref(false)
</script>

<template>
  <MSlideVerify />
</template>
```

### `threshold` 通过阈值

`threshold` 决定拖动占比达到多少判定通过，默认 `0.9`，调低可放宽校验：

```vue
<template>
  <MSlideVerify :threshold="0.5" text="拖到一半即可" />
</template>
```

### `text` 提示文案

`text` 设定待验证提示，`successText` 设定通过后的文案：

```vue
<template>
  <MSlideVerify text="按住并向右拖动" success-text="人机校验已通过" />
</template>
```

### `icon` 滑块图标

`icon` 设定待验证图标，`successIcon` 设定通过后的图标：

```vue
<template>
  <MSlideVerify icon="i-lucide-arrow-right" success-icon="i-lucide-shield-check" />
</template>
```

### `size` 尺寸

通过 `size` 调整组件尺寸：

```vue
<template>
  <MSlideVerify size="md" />
</template>
```

### `disabled` 禁用状态

`disabled` 冻结滑块，光标不可拖动且保持当前未验证态：

```vue
<template>
  <MSlideVerify disabled />
</template>
```

## 示例

### 继承字段上下文

放入 `UFormField` 后接收字段尺寸与错误态，滑块按表单状态渲染：

```vue
<template>
  <UFormField label="滑动验证" size="xs" error="示例错误态">
    <MSlideVerify />
  </UFormField>
</template>
```

### 融入`UFieldGroup`

与重置按钮组合时共享 `UFieldGroup` 尺寸，滑块区域和按钮保持统一高度：

```vue
<template>
  <UFieldGroup size="xs">
    <MSlideVerify class="flex-1" />
    <UButton icon="i-lucide-rotate-ccw" color="neutral" variant="subtle" />
  </UFieldGroup>
</template>
```

### 自定义滑块内容

`slider` 插槽接管滑块内部渲染，可读取 `verified` 与 `progress` 动态展示进度：

```vue [ComponentsSlideVerifySliderSlotExample.vue]
<script setup lang="ts">
const isVerified = ref(false)
</script>

<template>
  <MSlideVerify v-model="isVerified" class="w-sm">
    <template #slider="{ verified, progress }">
      <UIcon v-if="verified" name="i-lucide-check" />
      <span v-else class="text-xs font-medium">{{ Math.round(progress * 100) }}%</span>
    </template>
  </MSlideVerify>
</template>
```

### 事件回调

开始拖动触发 `dragStart`，松手触发 `dragEnd` 并回传是否成功，达到阈值额外触发 `success`：

```vue [ComponentsSlideVerifyEventsExample.vue]
<script setup lang="ts">
const isVerified = ref(false)
const slideVerifyRef = useTemplateRef('slideVerifyRef')
const toast = useToast()

function handleSuccess() {
  toast.add({
    title: '验证成功',
    description: '已触发 success 事件',
    color: 'success'
  })
}

function handleDragEnd(success: boolean) {
  if (!success) {
    toast.add({
      title: '验证失败',
      description: '请继续滑动',
      color: 'neutral'
    })
  }
}

function handleReset() {
  slideVerifyRef.value?.reset()
  toast.add({
    title: '已重置',
    color: 'neutral'
  })
}
</script>

<template>
  <div class="w-sm flex gap-4">
    <MSlideVerify
      ref="slideVerifyRef"
      v-model="isVerified"
      class="flex-1"
      @success="handleSuccess"
      @drag-end="handleDragEnd"
    />
    <UButton
      size="sm"
      color="neutral"
      variant="outline"
      @click="handleReset"
    >
      重置验证
    </UButton>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MSlideVerify component
 */
interface MSlideVerifyProps {
  id?: string | undefined;
  name?: string | undefined;
  /**
   * 尺寸大小
   */
  size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
  /**
   * 是否禁用
   */
  disabled?: boolean | undefined;
  /**
   * 待滑动时的提示文本
   * @default "\"请向右滑动验证\""
   */
  text?: string | undefined;
  /**
   * 验证成功时的提示文本
   * @default "\"验证成功\""
   */
  successText?: string | undefined;
  /**
   * 滑块图标
   * @default "\"i-lucide-chevrons-right\""
   */
  icon?: any;
  /**
   * 验证成功时的图标
   * @default "\"i-lucide-check\""
   */
  successIcon?: any;
  /**
   * 完成验证所需的阈值百分比（0-1）
   * @default "0.9"
   */
  threshold?: number | undefined;
  ui?: (Record<string, C> & { root?: SlotClass; track?: SlotClass; fill?: SlotClass; text?: SlotClass; slider?: SlotClass; icon?: SlotClass; }) | undefined;
  /**
   * @default "false"
   */
  modelValue?: boolean | undefined;
}
```

### Emits

```ts
/**
 * Emitted events for the MSlideVerify component
 */
interface MSlideVerifyEmits {
  update:modelValue: (payload: [value: boolean]) => void;
  success: (payload: []) => void;
  dragStart: (payload: []) => void;
  dragEnd: (payload: [success: boolean]) => void;
}
```

### Slots

```ts
/**
 * Slots for the MSlideVerify component
 */
interface MSlideVerifySlots {
  slider(): any;
}
```

### Expose

您可以通过 [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref){rel="[\"nofollow\"]"} 访问该类型化组件实例。

| Name      | Type                       |
| --------- | -------------------------- |
| `reset()` | `Promise<void>`   
 重置验证状态 |

## Theme

<component-theme></component-theme>## Changelog

See commit history for [src/runtime/components/slide-verify/SlideVerify.vue](https://github.com/mhaibaraai/movk-nuxt/commits/main/src/runtime/components/slide-verify/SlideVerify.vue).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.