这里主要用的是插件:vue-monoplasty-slide-verify
github地址:https://github.com/monoplasty/vue-monoplasty-slide-verify
安装方式:
npm install --save vue-monoplasty-slide-verify
使用方式:
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
demo:
<template>
<div>
<slide-verify
:l="42"
:r="10"
:w="310"
:h="155"
slider-text="向右滑动"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
></slide-verify>
<div>{{msg}}</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: ""
};
},
methods: {
onSuccess() {
this.msg = "login success";
},
onFail() {
this.msg = "1";
},
onRefresh() {
this.msg = "2";
}
}
};
</script>
<style lang="less" scoped>
</style>
效果: