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