# v-slider-verify

> vue滑动验证效果

Latest version **0.1.12** (published 2019-03-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-slider-verify
pnpm add v-slider-verify
yarn add v-slider-verify
bun add v-slider-verify
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.12 |
| Published | 2019-03-21 |
| First published | 2019-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 812.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | mrzhangxin |
| Maintainers | mrzhangxin |
| Keywords | vue, 滑动图片验证效果 |

## Links

- npm: https://www.npmjs.com/package/v-slider-verify
- npm.io page: https://npm.io/package/v-slider-verify

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.6

## Recent versions

- 0.1.12 (latest) — 2019-03-21
- 0.1.11 — 2019-03-15
- 0.1.10 — 2019-03-14
- 0.1.9 — 2019-03-14
- 0.1.8 — 2019-03-14
- 0.1.7 — 2019-03-14
- 0.1.6 — 2019-03-14
- 0.1.5 — 2019-03-14
- 0.1.4 — 2019-03-14
- 0.1.3 — 2019-03-14
- 0.1.2 — 2019-03-14
- 0.1.1 — 2019-03-14

## README

# v-slide-verify

## Quick Start

Using build tools:

```bash
npm install --save v-slider-verify
```

```js
import Vue from 'vue';
import vSliderVerify from 'v-slider-verify';

Vue.use(vSliderVerify);
```

### 2. Now you have it. The simplest usage:

```html
<v-slider-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
             @changeNum = "change"
            :sliderText="'请向右滑动'"
            :setNum = "10"
            ></v-slider-verify>
<div>{{msg}}</div>
```

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

## Document

### argument

| Param | Type | Describe |
| :------: | :------: | :------: |
| l | Number | block length |
| r | Number | block circle radius |
| w | Number | canvas width |
| h | Number | canvas height |
| sliderText | string | Slide filled right |
| setNum | Number | default(20) |

### callBack

| Event | Type | Describe |
| :------: | :------: | :------: |
| success | Function | success callback |
| fail | Function | fail callback |
| refresh | Function | refresh button callback |
| changeNum | Function | success num |


## Log
### V0.1.12

---
_Source: https://npm.io/package/v-slider-verify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._