一个纯前端的拖拽图片拼图的验证vue组件，支持

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

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> 参数说明

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