SlideCaptcha 滑动验证码

滑动拼图完成人机验证

何时使用

  • 需要进行人机验证、防止机器人提交时。

导入

import { SlideCaptcha } from "@reglow/reui";
captchapuzzle
向右滑动完成验证

基础用法

<script setup>
import { ref } from "vue";
import { SlideCaptcha } from "@reglow/reui";

const captchaRef = ref();
const backgroundImage = "/bg.jpg";
const puzzleImage = "/puzzle.png";

const onSuccess = (slideX) => {
  // slideX 为拼图块的 X 坐标（像素值）
  // 发送到后端验证
  console.log("滑动位置:", slideX);
  // 模拟验证
  setTimeout(() => {
    captchaRef.value.handleVerifiedSuccess();
  }, 500);
};

const onFail = () => {
  console.log("验证失败");
};

const onRefresh = () => {
  // 重新获取验证码图片
  console.log("刷新验证码");
};
</script>

<template>
  <SlideCaptcha
    ref="captchaRef"
    :background-image="backgroundImage"
    :puzzle-image="puzzleImage"
    :puzzle-width="40"
    :puzzle-y="50"
    :canvas-width="320"
    :canvas-height="160"
    @success="onSuccess"
    @fail="onFail"
    @refresh="onRefresh"
  />
</template>

更多示例

完整示例

从后端获取验证码图片，并在验证成功后调用后端接口确认。

<script setup>
import { ref, onMounted } from "vue";
import { SlideCaptcha } from "@reglow/reui";

const captchaRef = ref();
const bgImage = ref("");
const puzzleImg = ref("");
const puzzleY = ref(0);

// 从后端获取验证码
async function fetchCaptcha() {
  const res = await fetch("/api/captcha");
  const data = await res.json();
  bgImage.value = data.background;
  puzzleImg.value = data.puzzle;
  puzzleY.value = data.y;
}

onMounted(fetchCaptcha);

const onSuccess = async (slideX) => {
  const res = await fetch("/api/captcha/verify", {
    method: "POST",
    body: JSON.stringify({ x: slideX }),
  });
  const data = await res.json();
  if (data.success) {
    captchaRef.value.handleVerifiedSuccess();
  } else {
    captchaRef.value.handleFail();
  }
};
</script>

<template>
  <SlideCaptcha
    ref="captchaRef"
    :background-image="bgImage"
    :puzzle-image="puzzleImg"
    :puzzle-y="puzzleY"
    :canvas-width="320"
    :canvas-height="160"
    @success="onSuccess"
    @refresh="fetchCaptcha"
  />
</template>

API

Props

参数说明类型默认值
backgroundImage背景图片 URLstring-
puzzleImage拼图块图片 URLstring-
puzzleWidth拼图块宽度（px）number-
puzzleY拼图块 Y 坐标（px）number0
canvasWidth画布宽度（px）number-
canvasHeight画布高度（px）number-

Events

事件说明回调参数
success滑动完成(slideX: number)
fail验证失败()
refresh点击刷新()

Methods（通过 ref 调用）

方法说明
handleVerifiedSuccess()标记验证成功
handleFail()标记验证失败
reset()重置滑动状态
Select 选择器
基于 reka-ui 的组合式选择器。选项较少时也可用 [Radio](/components-library/reui/components/data-entry/radio)。
Switch 开关
Switch 开关