关于前端: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)
}