介绍

根据提示滑动滑块使拼成完整一张图来完成验证。此组件基于 SlideVerify 组件。

代码演示

基础使用

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

图片宽度 100%，高度自适应，为避免图片未加载完时位置被占领，可设置 aspect-ratio 属性让容器占据一定高度。

vue ts

<template>
  <div class="mx-10">
    <s-puzzle-verify
      ref="verifyRef"
      text="请按住滑块拖动"
      success-text="验证通过"
      :src="src"
      :target-pos="targetPos"
      :verify="verify"
      :aspect-ratio="320 / 219"
    ></s-puzzle-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-puzzle-verify
      ref="verifyRef"
      text="请按住滑块拖动"
      success-text="验证通过"
      :src="src"
      :target-pos="targetPos"
      :verify="verify"
      :aspect-ratio="320 / 219"
    ></s-puzzle-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

PuzzleVerifyProps

继承 SlideVerifyProps 。

属性	描述	类型	默认值
src	图片资源地址	string	-
aspect-ratio	图片宽高比，用于占位图片高度	number	320 / 240

PuzzleVerifyEmits

继承 SlideVerifyEmits

PuzzleVerifyExpose

继承 SlideVerifyExpose

主题定制

样式变量

CSS 变量	值
--s-puzzle-verify-image-margin-bottom	var(--s-size-sm)
--s-puzzle-verify-piece-width	var(--s-content-height)
--s-puzzle-verify-piece-height	var(--s-content-height)
--s-puzzle-verify-piece-box-shadow	2px 2px 15px rgb(0 0 0 / 0.8)
--s-puzzle-verify-hollow-box-shadow	inset 2px 2px 5px 0 rgb(0 0 0 / 0.4)