vue滑动图片验证的方式

本篇文章使用的是一款中间件

第一步使用npm安装

npm install --save vue-monoplasty-slide-verify

在main.js中引用

import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);

创建个div实现页面布局 把以下代码粘贴里面

<slide-verify :l="42":r="10":w="310":h="155"slider-text="向右滑动"@success="onSuccess"//成功的回调函数@fail="onFail"//失败的回调函数@refresh="onRefresh"//重置的回调函数></slide-verify><div>{{msg}}</div>

把以下方法引入到scrpit中

export default {name: 'App',data(){return {msg: '',}},methods: {onSuccess(){this.msg = 'login success'},onFail(){this.msg = ''},onRefresh(){this.msg = ''}}}