分享一個用於登錄驗證的vue組件

這是一個基於vue2的驗證組件--vue-drag-verify。用於登錄或者註冊等。能夠自定義背景色和字體以及形狀等屬性。

這裏是Demo

安裝

經過npm安裝

npm install vue-drag-verify --save

插件應用

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

組件參數

名稱 | 類型 | 默認值 | 說明
--- | --- | --- | ---
width | Number | 200 | 組件的寬度
height | Number | 60 | 組件的高度
text | String | swiping to the right side | 提示信息文字
successText | String | success | 驗證經過時的提示信息文字
background | String | #ccc | 組件背景色
color | String | #ffffff | 組件文字顏色
progressBarBg | String | #FFFF99 | 拖拽過程當中的背景顏色
completedBg | String | #66cc66 | 驗證成功的背景顏色
circle | Boolean | true | 設爲true,組件爲圓形按鈕，不然爲長方形
handlerIcon | String | - | 拖拽按鈕的icon
successIcon | String | - | 驗證經過時拖拽按鈕的icon
handlerBg | String | #fff | 拖拽按鈕的背景色
textSize | String | 20px | 組件的文字大小

推薦一個找vue,angular組件的輪子工廠