Vue拼图验证组件使用教程

JiAyInNnNn123

于 2019-11-14 13:57:06 发布

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： VUE

本文链接：https://blog.csdn.net/weixin_40121676/article/details/102895804

版权

Vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

首先在github上down下来demo
vue-puzzle-verification

在这里插入图片描述
找一个你需要的
我这里选择的是控制误差的demo用。

使用方法：

npm i vue-puzzle-verification

在mian.js中引入

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

        <div class="login-box">
             <div class="puzzle-box">
                 <PuzzleVerification
                    v-model="isVerificationShow4"
                    :puzzleImgList="puzzleImgList"
                     deviation="20"
                     blockType="puzzle"
                    :onSuccess="handleSuccess"
                    />
              </div>
       </div>

登录页面使用后会出现报错问题。
同事说是因为监听没有销毁…
所以

在这里插入图片描述

 beforeDestory(){
       document.removeEventListener("mousemove",this.moving);
       document.removeEventListener("touchmove",this.moving);
       document.removeEventListener("mouseup",this.moveEnd);
       document.removeEventListener("touchend",this.moveEnd)
    },