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>

四、参数说明