# vue-monoplasty-slide-verify
Vue插件，滑动验证码
## 安装
~~~shell
npm install --save vue-monoplasty-slide-verify
或
yarn add vue-monoplasty-slide-verify
~~~
## 示例
```html
<template>
<div>
<slide-verify
:l="42"
:r="10"
:w="310"
:h="155"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:slider-text="text"
></slide-verify>
<div>{{ msg }}</div>
</div>
</template>
<script>
import Vue from "vue";
import SlideVerify from "vue-monoplasty-slide-verify";
Vue.use(SlideVerify);
export default {
name: "App",
data() {
return {
msg: "",
text: "向右滑"
};
},
methods: {
onSuccess(times) {
console.log('验证通过，耗时' + times + '毫秒');
this.msg = "login success";
},
onFail() {
this.msg = "";
},
onRefresh() {
this.msg = "";
}
}
};
</script>
<style scoped></style>
```
## 参数
| Param | Type | Describe | Version |
| :-: | :-: | :-: | :-: |
| l | Number | 块长度 | |
| r | Number | 块圆半径 | |
| w | Number | 画布宽度 | |
| h | Number | 画布高度 | |
| sliderText | String | 幻灯片向右填充 | 1.0.5 |
| imgs | Array | 背景图数组，默认值 [] | 1.1.0 |
| accuracy | Number | 滑动验证的误差范围，默认值 5 | 1.1.1 |
| show | Boolean | 是否显示刷新按钮，默认值 true |
## 回调事件
| Event | Type | Describe | Version |
| :-: | :-: | :-: | :-: |
| success | Function | 成功回调 | 返回时间参数，单位为毫秒 |
| fail | Function | 失败回调 | |
| refresh | Function | 点击刷新按钮后的回调函数 | |
| again | Function | 检测到非人为操作滑动时触发的回调函数 | 1.1.1 |
| fulfilled | Function | 刷新成功之后的回调函数 |
## 调用刷新
~~~js
// 刷新
this.$refs.slideblock.reset();
~~~
