vue 实现滑动图片解锁

第一步：npm install --save vue-monoplasty-slide-verify

第二步：main.js配置

import Vue from 'vue';

import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

第三步：vue页面或组件：

// template
<slide-verify :l="42"
:r="10"
:w="310"
:h="155"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:slider-text="text"
></slide-verify>
<div>{{msg}}</div>
// script
export default {
name: 'App',
data(){
return {
msg: '',
text: '向右滑',
}
},
methods: {
onSuccess(){
this.msg = '成功'
},
onFail(){
this.msg = ''
},
onRefresh(){
this.msg = ''
}
}
}