# vue-drag-verify

> This is a vue component, which is sliding to unlock for login or sign up. This is used to protect your web app from bot attack.

Latest version **1.0.6** (published 2017-10-22) · 0 weekly downloads

## Install

```sh
npm install vue-drag-verify
pnpm add vue-drag-verify
yarn add vue-drag-verify
bun add vue-drag-verify
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2017-10-22 |
| First published | 2017-10-22 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| Author | Ashley Lv |
| Maintainers | ashleylv |

## Links

- npm: https://www.npmjs.com/package/vue-drag-verify
- npm.io page: https://npm.io/package/vue-drag-verify

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.3.3
- [shelljs](https://npm.io/package/shelljs.md) ^0.7.8
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0

## Recent versions

- 1.0.6 (latest) — 2017-10-22
- 1.0.5 — 2017-10-22
- 1.0.3 — 2017-10-22
- 1.0.1 — 2017-10-22
- 1.0.0 — 2017-10-22

## README

# vue-drag-verify [![NPM version](https://img.shields.io/npm/v/vue-drag-verify.svg)](https://www.npmjs.com/package/vue-drag-verify)

> This is a vue component, which is sliding to unlock for login or sign up. This is used to protect your web app from bot attack.
[demo](https://ashleylv.github.io/vue-drag-verify/)

## Installation

``` bash
 npm install vue-drag-verify --save
```

## Usage
``` xml
<drag-verify :width="width" 
			 :height="height" 
			 :text="text" 
			 :success-text="successText" 
			 :background="background" 
			 :progress-bar-bg="progressBarBg" 
			 :completed-bg="completedBg" 
			 :handler-bg="handlerBg" 
			 :handler-icon="handlerIcon" 
			 :text-size="textSize" 
			 :success-icon="successIcon" 
			 :circle="getShape"></drag-verify>
```

``` javascript
import Vue from 'vue'
import dragVerify from 'vue-drag-verify'

export default {
  name: 'app',
  components:{
    dragVerify
  }
}
```
## Props

Property|Type|Default|Description
---|---|---|---
width|Number|200|The width of the component
height|Number|60|The height of the component
text|String|swiping to the right side|The text shows on the component
successText|String|success|The text shows when it’s successful
background|String|#ccc|The background color of the component
color|String|#ffffff|The color of the text
progressBarBg|String|#FFFF99|The backgound color of the progress bar
completedBg|String|#66cc66|The backgound color of the component when the button dragged to the right side
circle|Boolean|true|If true, the shape of component is round
handlerIcon|String|-|The icon of handler
successIcon|String|-|The icon of handler when the button dragged to the right side
handlerBg|String|#fff|The background color of the handler
textSize|String|20px|Font size of prompt message

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