Vue拼图验证
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
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>
<PuzzleVerification
v-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=false
console.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 | —— | 打印成功信息 | 拼接失败时的回调 |