SlideVerify

流畅的滑动验证组件

简介

MSlideVerify 是一个现代化的滑动验证组件，提供流畅的拖拽交互体验。基于 motion-v 实现丰富的动画效果，可用于表单验证、敏感操作确认等场景。

使用 Motion 动画库提供流畅的拖拽交互和状态转换动画

基础用法

最简单的滑动验证：

请向右滑动验证

<script setup lang="ts">
const isVerified = ref(false)
</script>

<template>
  <MSlideVerify v-model="isVerified" class="w-sm" />
</template>

自定义文本

自定义提示文本和图标：

滑动解锁

<script setup lang="ts">
const isVerified = ref(false)
</script>

<template>
  <MSlideVerify
    v-model="isVerified"
    text="滑动解锁"
    success-text="解锁成功"
    icon="i-lucide-lock"
    success-icon="i-lucide-unlock"
    class="w-sm"
  />
</template>

自定义尺寸

通过 height 和 sliderWidth 调整组件尺寸：

小尺寸

大尺寸

<script setup lang="ts">
const isVerified1 = ref(false)
const isVerified2 = ref(false)
</script>

<template>
  <div class="space-y-4 w-sm">
    <MSlideVerify
      v-model="isVerified1"
      :height="36"
      :slider-width="40"
      text="小尺寸"
    />
    <MSlideVerify
      v-model="isVerified2"
      :height="56"
      :slider-width="60"
      text="大尺寸"
    />
  </div>
</template>

禁用状态

禁用滑动验证：

请向右滑动验证

<template>
  <MSlideVerify disabled class="w-sm" />
</template>

自定义阈值

通过 threshold 设置完成验证所需的滑动距离百分比（0-1）：

滑动 70% 即可验证

<script setup lang="ts">
const isVerified = ref(false)
</script>

<template>
  <MSlideVerify
    v-model="isVerified"
    :threshold="0.7"
    text="滑动 70% 即可验证"
    class="w-sm"
  />
</template>

事件处理

监听验证事件并使用 reset 方法重置验证状态：

请向右滑动验证

<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

Prop	Default	Type
`sliderWidth`	`50`	`number` 滑块宽度
`height`	`44`	`number` 滑块高度
`disabled`	`false`	`boolean` 是否禁用
`text`	`'请向右滑动验证'`	`string` 待滑动时的提示文本
`successText`	`'验证成功'`	`string` 验证成功时的提示文本
`icon`	`'i-lucide-chevrons-right'`	`string` 滑块图标
`successIcon`	`'i-lucide-check'`	`string` 验证成功时的图标
`threshold`	`0.9`	`number` 完成验证所需的阈值百分比（0-1）
`trackClass`		`null \| string \| false \| 0 \| 0n \| ClassNameArray` 自定义轨道样式
`sliderClass`		`null \| string \| false \| 0 \| 0n \| ClassNameArray` 自定义滑块样式
`textClass`		`null \| string \| false \| 0 \| 0n \| ClassNameArray` 自定义文本样式
`modelValue`	`false`	`boolean`

Emits

Event	Type
`update:modelValue`	`[value: boolean]`
`success`	`[]`
`dragStart`	`[]`
`dragEnd`	`[success: boolean]`

Slots

Slot	Type
`slider`	`{ verified: boolean; progress: number; }`

Expose

您可以通过 useTemplateRef 访问该类型化组件实例。

<script setup lang="ts">
const slideVerifyRef = useTemplateRef('slideVerifyRef')
</script>

<template>
  <MSlideVerify ref="slideVerifyRef" />
</template>

这将使您能够访问以下内容：

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

Changelog

f541f — feat: 集成 SlideVerify 为 AutoForm 控件

1b795 — feat: SlideVerify 组件添加文字渐变动画效果

0569c — feat: 添加 SlideVerify 滑块验证组件

DatePicker

基于国际化标准的日期选择器组件

StarRating

交互式星级评分组件