Vue拼图验证码组件完整使用指南

Vue拼图验证码组件完整使用指南

【免费下载链接】vue-puzzle-vcode vue 拼图人机验证 右滑拼图验证 项目地址: https://gitcode.com/gh_mirrors/vu/vue-puzzle-vcode

项目介绍

Vue-Puzzle-Vcode 是一款基于 Vue.js 的纯前端拼图人机验证组件，支持右滑拼图验证功能。该组件无需后端接口配合，开箱即用，为开发者提供了一种简单高效的验证码解决方案。

安装方法

Vue 2.x 版本安装

npm install vue-puzzle-vcode --save

Vue 3.x 版本安装

npm install vue3-puzzle-vcode --save

Nuxt3 专用版本

npm install vue3-puzzle-vcode@1.1.6-nuxt --save

快速开始

Vue 2.x 基础使用

<template>
  <div>
    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
    <button @click="submit">开始验证</button>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
  data() {
    return {
      isShow: false,
    };
  },
  components: {
    Vcode,
  },
  methods: {
    submit() {
      this.isShow = true;
    },

    onSuccess(msg) {
      this.isShow = false;
    },

    onClose() {
      this.isShow = false;
    },
  },
};
</script>

Vue 3.x 基础使用

<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>

组件参数详解

字段	类型	默认值	说明
show	Boolean	false	是否显示验证码弹框
type	String	"modal"	"modal"模态框模式/"inside"内嵌模式
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	"拖动滑块完成拼图"	滑动条里的文字
className	String	""	给根元素一个class类用于自定义样式

事件处理

事件名	返回值	说明
success	偏差值	验证通过时触发，返回用户移动距离与目标距离的偏差值 px
fail	偏差值	验证失败时触发，返回值同上
close	null	用户点击遮罩层的回调
reset	null	用户手动点击右上角刷新按钮时的回调

高级功能

自定义图片功能

<template>
  <Vcode :imgs="imgs" />
</template>

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

const imgs = [Img1, Img2];
</script>

内嵌模式使用

<template>
  <div class="box">
    <Vcode type="inside" />
  </div>
</template>

<style>
.box{
  position: relative;
  width: 500px;
}
</style>

手动刷新功能

<Vcode ref="vcode" />

<script setup>
const vcode = ref(null);
vcode.value.reset(); // 手动刷新
</script>

浏览器兼容性

组件支持以下浏览器：

• iOS >= 8
• Android > 4.1
• last 1 versions

• 1%

• not dead

对于 IE 浏览器，由于未添加 babel-polyfill，建议直接复制 src/app.vue 和 src/assets 到自己的项目中使用。

开发与构建

开发环境启动

npm run dev

生产环境构建

npm run build

项目结构说明

• src/app.vue - 主要组件文件
• src/index.js - 组件入口文件
• src/assets/ - 资源文件目录
• example/ - 示例代码目录
• dist/ - 构建输出目录

注意事项

1. 当不传递 imgs 字段或图片加载出错时，会自动生成随机图片
2. 模态框的显示和隐藏完全由父级控制，用户通过验证后需要手动隐藏模态框
3. 自定义网络图片时需要注意跨域问题
4. 拼图块现在会呈现随机形状，避免出现正方形的拼图块

版本更新

最新版本为 1.1.10，主要修复了在判定过程中关闭模态框导致reset失效的问题，提升了组件的稳定性和用户体验。

通过本指南，您可以快速掌握 Vue-Puzzle-Vcode 组件的使用方法，为您的 Vue 项目添加安全可靠的验证码功能。

【免费下载链接】vue-puzzle-vcode vue 拼图人机验证 右滑拼图验证 项目地址: https://gitcode.com/gh_mirrors/vu/vue-puzzle-vcode