Vue滑块验证码

0. 序

在最近的项目中想实现一个验证码发送的前端人机校验，发现市面上使用的多的是滑块验证码，本想查查有没有纯js实现的，尝试了很多办法都没有实现，只能找模块一键引入了。

vue3-puzzle-vcode是vue3版本的，也有vue2的，自行百度吧。

1. 安装

npm安装

1
npm install vue3-puzzle-vcode --save

2. 使用

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

img