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

Installation

npm install vue-drag-verify --save

Usage

<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>

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