vue滑动插件：vue-drag-verify

滑动验证：https://github.com/AshleyLv/vue-drag-verify

 

插件应用--安装

npm install vue-drag-verify --save

html

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