Skip to content

Latest commit

 

History

History
166 lines (129 loc) · 6.29 KB

README3.md

File metadata and controls

166 lines (129 loc) · 6.29 KB

vue3-puzzle-vcode npm npm downloads

DEMO: https://isluo.com/work/vue-puzzle-vcode/

img

安装 vue3-puzzle-vcode

  npm install vue3-puzzle-vcode --save

最简单例子

<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 用户手动点击右上角刷新按钮时的回调

success事件 / fail事件 会返回两个参数 ：

    deviation: number, // 偏差值，用户滑动的位置 和 拼图缺口所在位置 的距离，单位px
    obj: {
      deviation: number, // 同 deviation
      offsetX: number, // 用户滑动的距离，单位px
      pinX: number, // 拼图缺口的所在位置（相对canvas的左边缘）， 单位px
    }

自定义图片

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

内嵌模式下，需要自己处理容器样式。

手动刷新

每当:show="isShow" isShow等于true时，会自动刷新一次内部状态
你也可以手动刷新：

  <Vcode ref="vcode" />

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

说明

  • 当不传递 imgs 字段或图片加载出错时，会自动生成随机图片
  • 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框

Nuxt3: 如果你使用Nuxt3发现样式出现问题，请使用以下专用版本试试

  npm install vue3-puzzle-vcode@1.1.6-nuxt --save
  • 为什么要这样?
    Nuxt3打包服务器端代码使用了Nitro库，这个库打包时不知为何无法识别相对路径的CSS代码，因此为Nuxt3专门制作了一个版本
    以后每次发布新的版本时，都会同时发布一个专用于Nuxt的版本，后缀为-nuxt；

更新日志

2024/01/25 - 1.1.7

  • 更新: 增加了success/fail事件的返参
  • 优化：现在不会出现正方形的拼图块

2023/01/03 - 1.1.6

  • 新增: 拼图块现在会呈现随机形状

2023/01/02 - 1.1.5

  • 新增: 内嵌模式

2022/12/01 - 1.0.7

  • 修复: 修复了一个在判定中关闭模态框可能会导致reset失效的问题

2022/06/02 - 1.0.6

  • 更新：支持TypeScript
  • 修复：修复了因vue版本不同导致的报错问题

2021/10/18 - 1.0.4

  • 修复：修复了在判定状态还未刷新时关闭模态框，重新打开不刷新的问题

2021/10/13 - 1.0.3

  • 修复：解决了一个在safari中无法显示拼图块的问题（safari drawImage看起来像是异步操作）

2021/10/12 - 1.0.2

  • 修复：删除了一个无用的ref变量引用，这个引用可能导致在vue3.2.19及以下的版本中出现问题

2021/10/12 - 1.0.1

  • 修复：重复加载图片的问题
  • 修复：png图片的透明部分现在会用白色填充
  • 更新：初始化时不再自动加载图片，直到show出来时再加载