关于前端:vue项目vuepuzzleverification实现拖拽拼图校验

1.npm装置

npm i vue-puzzle-verification

2.在main.js中引入组件

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

3.在vue页面中间接应用

<div class="puzzle-box" style="width: 295px;height: 500px">  <puzzleVerification     :verificationShow="true"     blockType="puzzle"    :onSuccess="handleSuccess"     :onError="handleError"     :puzzleImgList="puzzleImgList"     style="display: block"  ></puzzleVerification></div>

data(){    return{      puzzleImgList:[        '图片1',        '图片2',        '图片3'      ]    }  },

这样就能够失常运行了，刷新后puzzleImgList中图片会随机切换

3.运行发现后盾会报错，但不影响组件应用

解决报错信息：

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