Sard

Appearance

100%
在新窗口打开⤴

SlideVerify滑动验证

介绍 ​

根据提示滑动滑块到指定位置来完成验证。

代码演示 ​

基础使用 ​

使用 text, success-text 属性设置文案。

使用 verify 属性进行验证，其为一个函数，接收用户操作结果，返回布尔类型或者 Promise，为真时验证成功，否则验证失败； 操作结果对象的 actualPos 属性是一个百分比数值，表示用户拖拽的距离，为100时表示拖拽到最右边。

验证完，可调用 reset 方法重置结果。

vue
<template>
  <div class="mx-10">
    <s-slide-verify
      ref="verifyRef"
      text="请按住滑块拖动"
      success-text="验证通过"
      :verify="verify"
    ></s-slide-verify>

    <s-button block variant="link" class="mt-5" @click="onReset">重置验证</s-button>
  </div>
</template>

<script setup lang="ts">
import { sleep, type SlideVerifyExpose, type SlideVerifyResult } from 'sard'
import { ref } from 'vue'

const verify = async ({ actualPos }: SlideVerifyResult) => {
  await sleep(300)

  if (actualPos === 100) {
    return true
  }
  return false
}

const verifyRef = ref<SlideVerifyExpose>()

const onReset = () => {
  verifyRef.value?.reset()
}
</script>
vue
<template>
  <div class="mx-10">
    <s-slide-verify
      ref="verifyRef"
      text="请按住滑块拖动"
      success-text="验证通过"
      :verify="verify"
    ></s-slide-verify>

    <s-button block variant="link" class="mt-5" @click="onReset">重置验证</s-button>
  </div>
</template>

<script setup lang="js">
import { sleep } from 'sard'
import { ref } from 'vue'
const verify = async ({ actualPos }) => {
  await sleep(300)
  if (actualPos === 100) {
    return true
  }
  return false
}
const verifyRef = ref()
const onReset = () => {
  verifyRef.value?.reset()
}
</script>

显示目标 ​

设置 show-target 属性显示目标；使用 target-pos 属性设置目标位置，类型为百分比数值，默认为 100；可比较操作结果对象的 targetPos 和 actualPos 属性值来判断是否拖拽到位。

vue
<template>
  <div class="mx-10">
    <s-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      show-target
      :target-pos="targetPos"
      :verify="verify"
    ></s-slide-verify>

    <s-button block variant="link" class="mt-5" @click="onReset">重置验证</s-button>
  </div>
</template>

<script setup lang="ts">
import { random, sleep, type SlideVerifyExpose, type SlideVerifyResult } from 'sard'
import { ref } from 'vue'

const targetPos = ref(random(50, 100))

const verify = async ({ targetPos, actualPos }: SlideVerifyResult) => {
  await sleep(300)

  const errorValue = 2
  if (actualPos >= targetPos - errorValue && actualPos <= targetPos + errorValue) {
    return true
  }
  return false
}

const verifyRef = ref<SlideVerifyExpose>()

const onReset = () => {
  verifyRef.value?.reset()
  targetPos.value = random(50, 100)
}
</script>
vue
<template>
  <div class="mx-10">
    <s-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      show-target
      :target-pos="targetPos"
      :verify="verify"
    ></s-slide-verify>

    <s-button block variant="link" class="mt-5" @click="onReset">重置验证</s-button>
  </div>
</template>

<script setup lang="js">
import { random, sleep } from 'sard'
import { ref } from 'vue'
const targetPos = ref(random(50, 100))
const verify = async ({ targetPos, actualPos }) => {
  await sleep(300)
  const errorValue = 2
  if (actualPos >= targetPos - errorValue && actualPos <= targetPos + errorValue) {
    return true
  }
  return false
}
const verifyRef = ref()
const onReset = () => {
  verifyRef.value?.reset()
  targetPos.value = random(50, 100)
}
</script>

错误时不重置 ​

默认验证失败会自动重置结果，如果需要手动重置，可设置 :reset-when-error="false" 属性。

vue
<template>
  <div class="mx-10">
    <s-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      error-text="验证失败"
      show-target
      :target-pos="targetPos"
      :reset-when-error="false"
      :verify="verify"
    ></s-slide-verify>

    <s-button block variant="link" class="mt-5" @click="onReset">重置验证</s-button>
  </div>
</template>

<script setup lang="ts">
import { random, sleep, type SlideVerifyExpose, type SlideVerifyResult } from 'sard'
import { ref } from 'vue'

const targetPos = ref(random(50, 100))

const verify = async ({ targetPos, actualPos }: SlideVerifyResult) => {
  await sleep(300)

  const errorValue = 2
  if (actualPos >= targetPos - errorValue && actualPos <= targetPos + errorValue) {
    return true
  }
  return false
}

const verifyRef = ref<SlideVerifyExpose>()

const onReset = () => {
  verifyRef.value?.reset()
  targetPos.value = random(50, 100)
}
</script>
vue
<template>
  <div class="mx-10">
    <s-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      error-text="验证失败"
      show-target
      :target-pos="targetPos"
      :reset-when-error="false"
      :verify="verify"
    ></s-slide-verify>

    <s-button block variant="link" class="mt-5" @click="onReset">重置验证</s-button>
  </div>
</template>

<script setup lang="js">
import { random, sleep } from 'sard'
import { ref } from 'vue'
const targetPos = ref(random(50, 100))
const verify = async ({ targetPos, actualPos }) => {
  await sleep(300)
  const errorValue = 2
  if (actualPos >= targetPos - errorValue && actualPos <= targetPos + errorValue) {
    return true
  }
  return false
}
const verifyRef = ref()
const onReset = () => {
  verifyRef.value?.reset()
  targetPos.value = random(50, 100)
}
</script>

自定义主题色 ​

可通过 css 变量 --s-slide-verify-theme-color 来设置想要的主题色。

vue
<template>
  <div class="mx-10">
    <s-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      error-text="验证失败"
      show-target
      :target-pos="targetPos"
      :reset-when-error="false"
      :verify="verify"
      style="--s-slide-verify-theme-color: var(--s-color-primary)"
    ></s-slide-verify>

    <s-button block variant="link" class="mt-5" @click="onReset">重置验证</s-button>
  </div>
</template>

<script setup lang="ts">
import { random, sleep, type SlideVerifyExpose, type SlideVerifyResult } from 'sard'
import { ref } from 'vue'

const targetPos = ref(random(50, 100))

const verify = async ({ targetPos, actualPos }: SlideVerifyResult) => {
  await sleep(300)

  const errorValue = 2
  if (actualPos >= targetPos - errorValue && actualPos <= targetPos + errorValue) {
    return true
  }
  return false
}

const verifyRef = ref<SlideVerifyExpose>()

const onReset = () => {
  verifyRef.value?.reset()
  targetPos.value = random(50, 100)
}
</script>
vue
<template>
  <div class="mx-10">
    <s-slide-verify
      ref="verifyRef"
      text="拖动滑块至虚线框内"
      success-text="验证通过"
      error-text="验证失败"
      show-target
      :target-pos="targetPos"
      :reset-when-error="false"
      :verify="verify"
      style="--s-slide-verify-theme-color: var(--s-color-primary)"
    ></s-slide-verify>

    <s-button block variant="link" class="mt-5" @click="onReset">重置验证</s-button>
  </div>
</template>

<script setup lang="js">
import { random, sleep } from 'sard'
import { ref } from 'vue'
const targetPos = ref(random(50, 100))
const verify = async ({ targetPos, actualPos }) => {
  await sleep(300)
  const errorValue = 2
  if (actualPos >= targetPos - errorValue && actualPos <= targetPos + errorValue) {
    return true
  }
  return false
}
const verifyRef = ref()
const onReset = () => {
  verifyRef.value?.reset()
  targetPos.value = random(50, 100)
}
</script>

API ​

SlideVerifyProps ​

属性描述类型默认值
target-pos目标位置，百分比数值，100表示最右边，0表示最左边number100
text默认状态下的文案string-
success-text验证成功状态下的文案string-
error-text验证失败状态下的文案string-
disabled是否禁用booleanfalse
reset-when-error是否在验证失败时重置booleantrue
show-target是否显示目标booleanfalse
verify验证函数，接收操作结果，返回 true 或者 Promise<true> 表示验证成功，否则验证失败(result: SlideVerifyResult) => Promise\<boolean> | boolean-

SlideVerifyResult ​

ts
interface SlideVerifyResult {
  targetPos: number
  actualPos: number
  startTime: number
  endTime: number
  trajectory: [x: number, y: number, t: number][]
}
属性描述
targetPos目标位置百分比
actualPos实际拖拽位置百分比
startTime拖拽开始时间戳
endTime拖拽结束时间戳
trajectory拖拽轨迹点数组，记录每个轨迹点的屏幕坐标和时间戳

SlideVerifyEmits ​

事件描述类型
change拖拽或重置使当前滑块变动时触发，接收当前拖拽的百分比值(percent: number) => void
start拖拽开始时触发(event: TouchEvent) => void
move拖拽移动时触发(event: TouchEvent) => void
end拖拽结束时触发(event: TouchEvent) => void

SlideVerifyExpose ​

属性描述类型
reset重置验证结果() => void

主题定制 ​

样式变量 ​

CSS 变量值
--s-slide-verify-heightvar(--s-content-height-sm)
--s-slide-verify-bgvar(--s-fill-color-secondary)
--s-slide-verify-theme-colorvar(--s-color-success)
--s-slide-verify-border-radiusvar(--s-border-radius-sm)
--s-slide-verify-border-colorvar(--s-text-color-fourth)
--s-slide-verify-font-sizevar(--s-font-size)
--s-slide-verify-icon-sizevar(--s-size-xl)

Released under the MIT License.

Copyright © 2023-present wuzhitao