Vue拼图验证

vue-puzzle-verification

封装的一个用于登录验证的拼图的vue组件，使用了canvas画图和拖拽的一些技巧。支持大小、形状、图片、偏差、范围的自定义。

一、安装使用

npm install vue-puzzle-verification

二、main.js里引入

import PuzzleVerification from 'vue-puzzle-verification'
Vue.use(PuzzleVerification);

三、页面引入使用

<template><div><div @click="show = true">显示</div><PuzzleVerificationv-model="show":puzzleImgList="puzzleImgList"blockType="puzzle":onSuccess="handleSuccess":onError="handleError"/></div>
</template><script>
import PuzzleVerification from "vue-puzzle-verification";
export default {components: { PuzzleVerification },data() {return {show: false,puzzleImgList: [require("../../assets/images/img-timeline-02.jpg"),require("../../assets/images/img-timeline-03.jpg"),require("../../assets/images/img-timeline-04.jpg"),require("../../assets/images/img-timeline-05.jpg"),require("../../assets/images/img-timeline-06.jpg"),require("../../assets/images/img-timeline-07.jpg"),require("../../assets/images/img-timeline-08.jpg"),],};},methods: {handleSuccess() {this.show=falseconsole.log("验证成功");},handleError() {console.log("验证失败");},}
}
</script>

四、参数说明

参数	是否必需	类型	可选值	默认值	说明
v-model	是	——	——	——	绑定显示与隐藏
blockType	否	string	square, puzzle	puzzle	滑块的形状
blockSize	否	string, number	0 ~	40	滑块的大小（正方形），不能大于画布尺寸
width	否	string, number	0 ~	260	画布图片的宽度
height	否	string, number	0 ~	120	画布图片的高度
puzzleImgList	否	array	——	三张引用图片	传入的图片
blockRadius	否	string, number	0 ~	4	滑块圆角的大小（仅当其形状是square有效）
deviation	否	string, number	0 ~	4	滑块吻合的误差
wraperPadding	否	string, number	0 ~	20	滑块随机出现的范围，数字越大，范围越大（不能大于画布尺寸）
onSuccess	否	function	——	打印成功信息	拼接成功时的回调
onError	否	function	——	打印成功信息	拼接失败时的回调