共计 728 个字符,预计需要花费 2 分钟才能阅读完成。
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)
}
正文完