概述

和输入验证码相比，使用右滑拼图验证对用户更友好

右滑拼图验证插件的GitHub仓库地址为：javaLuo/vue-puzzle-vcode: vue 拼图人机验证 右滑拼图验证 (github.com)

Vue2和Vue3的使用文档都有，根据自己的需求选择，我使用的是Vue3

实现

安装

1
npm install vue3-puzzle-vcode --save

使用

下面是一个最简单的例子，使用的图片是内置的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <button @click="onShow">开始验证</button>
    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
</template>

<script setup>
  import { ref } from "vue";
  import Vcode from "vue3-puzzle-vcode";

  const isShow = ref(false);

  const onShow = () => {
    isShow.value = true;
  };

  const onClose = () => {
    isShow.value = false;
  };

  const onSuccess = () => {
    onClose(); // 验证成功，需要手动关闭模态框
  };
</script>

一般直接用内置的图片就行了，如果要自定义图片，示例代码如下

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <Vcode :imgs="imgs" />
</template>

<script>
import Vcode from "vue3-puzzle-vcode";
import Img1 from "~/assets/img1.png";
import Img2 from "~/assets/img2.png";

const imgs = [Img1, Img2];

</script>

上面自定义的图片是本地的图片，还可以使用网络图片

1
const imgs = ['https://image.zoutl.cn/1.jpeg', 'https://image.zoutl.cn/2.jpeg'];

效果截图

image-20230130230243751

参数

字段 类型 默认值 说明
show Boolean false 是否显示验证码弹框
canvasWidth Number 310 主图区域的宽度，单位 px
canvasHeight Number 160 主图区域的高度，单位 px
puzzleScale Number 1 拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大
sliderSize Number 50 左下角用户拖动的那个滑块的尺寸，单位 px
range Number 10 判断成功的误差范围，单位 px, 滑动的距离和拼图的距离小于等于此值时，会判定重合
imgs Array null 自定义图片，见下方例子
successText String “验证通过！” 验证成功时的提示文字
failText String “验证失败，请重试” 验证失败时的提示文字
sliderText String “拖动滑块完成拼图” 下方滑动条里的文字

事件

事件名 返回值 说明
success 偏差值 验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值 px
fail 偏差值 验证失败时会触发，返回值同上
close null 用户点击遮罩层的回调