vpv

vue-puzzle-verification

一个纯前端的拖拽图片拼图的验证vue组件,支持大小、形状、图片、偏差、范围的自定义

Showing:

Popularity

Downloads/wk

43

GitHub Stars

46

Maintenance

Last Commit

2yrs ago

Contributors

1

Package

Dependencies

2

Size (min+gzip)

28.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vue-puzzle-verification

封装的一个用于登录验证的拼图的vue组件,使用了canvas画图和拖拽的一些技巧。canvas的API很好用,可以画出各种图形。

使用方法

  • npm i vue-puzzle-verification 安装使用
  • 在main.js中引入
import PuzzleVerification from 'vue-puzzle-verification'
Vue.use(PuzzleVerification)
  • 在.vue文件中HTML里,直接使用<PuzzleVerification/>即可

效果展示

1. 简单用法:

简单用法

<div class="login-box">
  <button @click="handleClick(1)">最简单用法</button>
  <div class="puzzle-box">
    <PuzzleVerification
      v-model="isVerificationShow1"
      :onSuccess="handleSuccess"
    />
  </div>
</div>

2. 拼图形滑块:

拼图形滑块

<div class="login-box">
 <button @click="handleClick(2)">拼图形滑块</button>
 <div class="puzzle-box">
   <PuzzleVerification
     v-model="isVerificationShow2"
     :puzzleImgList="puzzleImgList"
     blockType="puzzle"
     :onSuccess="handleSuccess"
   />
 </div>
</div>

3. 控制大小:

控制大小

<div class="login-box">
  <button @click="handleClick(3)">控制大小</button>
  <div class="puzzle-box">
    <PuzzleVerification
      v-model="isVerificationShow3"
      width="300"
      height="200"
      blockSize="80"
      blockRadius="5"
      :onSuccess="handleSuccess"
    />
  </div>
</div>

4. 控制误差:

控制误差

<div class="login-box">
  <button @click="handleClick(4)">控制误差</button>
  <div class="puzzle-box">
    <PuzzleVerification
      v-model="isVerificationShow4"
      :puzzleImgList="puzzleImgList"
      deviation="20"
      blockType="puzzle"
      :onSuccess="handleSuccess"
    />
  </div>
</div>

5. 滑块出现的范围:

滑块出现的范围

<div class="login-box">
  <button @click="handleClick(5)">控制滑块出现位置范围</button>
  <div class="puzzle-box">
    <PuzzleVerification
      v-model="isVerificationShow5"
      wraperPadding="50"
      :onSuccess="handleSuccess"
    />
  </div>
</div>

参数说明

参数是否必需类型可选值默认值说明
v-model---------绑定显示与隐藏
blockTypestringsquare, puzzlepuzzle滑块的形状
blockSizestring, number0 ~40滑块的大小(正方形),不能大于画布尺寸
widthstring, number0 ~260画布图片的宽度
heightstring, number0 ~120画布图片的高度
puzzleImgListarray---三张引用图片传入的图片
blockRadiusstring, number0 ~4滑块圆角的大小(仅当其形状是square有效)
deviationstring, number0 ~4滑块吻合的误差
wraperPaddingstring, number0 ~20滑块随机出现的范围,数字越大,范围越大(不能大于画布尺寸)
onSuccessfunction---打印成功信息拼接成功时的回调
onErrorfunction---打印失败信息拼接失败时的回调

可以clone下来,运行demo演示示例。

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100