介绍

根据提示滑动滑块使图片角度为正来完成验证。此组件基于 SlideVerify 组件。

代码演示

基础使用

用法同 SlideVerify，仅多了一个 src 属性以展示图片的形式来代替虚线目标框。

vue ts

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

    <s-button block variant="link" class="mt-5" @click="onReset">重置验证</s-button>
    <s-button block variant="link" class="mt-3" @click="onUpdate">更新</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(30, 80))
const src = ref('')

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

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

const verifyRef = ref<SlideVerifyExpose>()

const onReset = () => {
  verifyRef.value?.reset()
  targetPos.value = random(30, 80)
}

let i = 0
function update() {
  src.value = `https://fastly.jsdelivr.net/npm/@sard/assets/images/cat${(i = ++i % 12) || 12}.jpg`
}
update()

const onUpdate = () => {
  update()
  onReset()
}
</script>

vue js

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

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

<script setup lang="js">
import { random, sleep } from 'sard'
import { ref } from 'vue'
const targetPos = ref(random(30, 80))
const src = ref('')
const verify = async ({ actualPos, targetPos }) => {
  await sleep(100)
  const errorValue = 3
  if (actualPos >= targetPos - errorValue && actualPos <= targetPos + errorValue) {
    return true
  }
  return false
}
const verifyRef = ref()
const onReset = () => {
  verifyRef.value?.reset()
  targetPos.value = random(30, 80)
}
let i = 0
function update() {
  src.value = `https://fastly.jsdelivr.net/npm/@sard/assets/images/cat${(i = ++i % 12) || 12}.jpg`
}
update()
const onUpdate = () => {
  update()
  onReset()
}
</script>

API

RotateVerifyProps

继承 SlideVerifyProps 。

属性	描述	类型	默认值
src	图片资源地址	string	-

RotateVerifyEmits

继承 SlideVerifyEmits

RotateVerifyExpose

继承 SlideVerifyExpose

主题定制

样式变量

CSS 变量	值
--s-rotate-verify-image-size	128px
--s-rotate-verify-image-margin-bottom	var(--s-size-lg)