vue项目vue-puzzle-verification实现拖拽拼图校验
1.npm安装
npm i vue-puzzle-verification
2.在main.js中引入组件
import puzzleVerification from 'vue-puzzle-verification'
Vue.use(puzzleVerification)
3.在vue页面中直接使用
data(){
return{
isVerificationShow:true,
puzzleImgList:[
'图片1',
'图片2',
'图片3'
]
}
},
这样就可以正常运行了,刷新后puzzleImgList中图片会随机切换
文章图片
【vue项目vue-puzzle-verification实现拖拽拼图校验】3.运行发现后台会报错,但不影响组件使用
文章图片
解决报错信息:
beforeDestroy(){
document.removeEventListener("mousemove",this.moving);
document.removeEventListener("touchmove",this.moving);
document.removeEventListener("mouseup",this.moveEnd);
document.removeEventListener("touchend",this.moveEnd)
}
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 17|17 关山松 第二课作业#公众号项目# D20
- RxJava|RxJava 在Android项目中的使用(一)
- Hacking|Hacking with iOS: SwiftUI Edition - SnowSeeker 项目(一)
- VueX--VUE核心插件
- 靠QQ月入上万灰色暴利偏门的项目
- spring|spring boot项目启动websocket
- vue组件中为何data必须是一个函数()
- 用npm发布一个包的教程并编写一个vue的插件发布