# 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();
~~~
