vue滑動插件：vue-drag-verify

滑動驗證：https://github.com/AshleyLv/vue-drag-verify

插件應用--安裝

npm install vue-drag-verify --save
           

html

<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"
                     ref="Verify"
                  >
                  </drag-verify>
           

import Vue from 'vue'
import 'font-awesome/css/font-awesome.min.css'
import dragVerify from 'vue-drag-verify'

export default {
  name: 'app',
  components:{
    dragVerify
  },
 data () {
    return {
      handlerIcon: "fa fa-angle-double-right",
      successIcon: "fa fa-check",
      background: "#cccccc",
      progressBarBg: "#4b0",
      completedBg: "#66cc66",
      handlerBg: "#fff",
      text: "請将滑塊拖動到右側",
      successText: "驗證成功",
      width: 320,
      height: 42,
      textSize: "18px",
      isCircle:'true'
    }
  },
}
           

這裡判斷是否完成驗證。使用元素擷取其中的。isPassing

測試：

console.log(this.$refs.Verify.isMoving)
      console.log(this.$refs.Verify.isPassing)
      console.log(this.$refs.Verify.handlerIconClass)
           

列印結果

//未滑動完列印
false
 false
 fa fa-check
//滑動完成列印
false
 true
 fa fa-angle-double-right

           

注意引入：font-awesome/css/font-awesome.min.css，用到了字型圖示

handlerIcon: "fa fa-angle-double-right",
      successIcon: "fa fa-check",
           

插件的各參數

名稱 | 類型 | 預設值 | 說明

--- | --- | --- | ---

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 | 元件的文字大小