vue-drag-verify 简单滑动验证，可配置自己想要的颜色

1.安装

npm install vue-drag-verify -S

2.使用

这里我是某个组件中用到了 就在组件中引用了 (这个没有重置，这里用v-if进行重置)

<template>
<button @click='clicks'></button>
<drag-verify
v-if="isVerify"  /*重置验证*/
 :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"
 @passcallback="success" //验证成功执行
ref="Verify"
></drag-verify>
</template>

<script>
import dragVerify from 'vue-drag-verify'
export default {
components: {dragVerify},
data () {
    return {
      isVerify:false,
      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'
    }
  },
}，
methods:{
clicks（）{
this.isVerify=true
}
}，
</script>