基本上的前端的滑块，图片验证，文字验证都有

https://github.com/yimijianfang/vue-drag-verify

示例：https://yimijianfang.github.io/vue-drag-verify/#/

实例演示：

1)普通的滑块验证

安装：

npm i vue-drag-verify2 -S

安装之后的版本号是: "vue-drag-verify2": "^1.1.0",

使用：

import dragVerify from 'vue-drag-verify2'

components:{
    dragVerify
  },

<drag-verify 
                     :width="width" 
                     :height="height" 
                     :text="text" 
                     :isPassing.sync="isPass"
                     :successText="successText" 
                     :background="background" 
                     :progressBarBg="progressBarBg" 
                     :completedBg="completedBg" 
                     :handlerBg="handlerBg" 
                     :handlerIcon="handlerIcon" 
                     :textSize="textSize" 
                     :successIcon="successIcon"
                     :circle="iscircle"
                     @passcallback="passcall"
                     ref="dragVerify"
                  >
                  </drag-verify>

//数据
data() {
    return {
      
      background: "#e9e9e9",
      progressBarBg: "#ccc",
      completedBg: "#4092FF",
      handlerBg: "#fff",
      text: "请将滑块拖动到右侧",
      successText: "验证成功",
      width: 360,
      height: 48,
      textSize: "18px",
      iscircle:false,
      isPass:false,
      handlerIcon: "fa fa-angle-double-right",
      successIcon: "fa fa-check",
    }
}

 // 重置滑块验证
      this.isPass = false
      
      if(this.$refs.dragVerify != undefined){
          this.$refs.dragVerify.reset();
        }   

 效果：

 2）带图片拼图的滑块验证

安装：npm i vue-drag-verify-img-chip -S

引入：import dragVerifyImgChip from "vue-drag-verify-img-chip";

components: {
    dragVerifyImgChip
  },
 <!-- 图片滑动 -->
        <drag-verify-img-chip 
          ref="dragVerify"
          :imgsrc="dragimg"
          :isPassing.sync="isPass"
          :showRefresh="false"
          text="请按住滑块拖动"
          successText="验证通过"
          refreshIcon="iconfont icon-shuaxin"
          handlerIcon="iconfont icon-shuangjiantou-you"
          successIcon="iconfont icon-icon_duigouzhong"
          @refresh="refreshimg"
          @passcallback="passcall"
          >
        </drag-verify-img-chip>

数据：
 isPass: false,
      // 滑动验证end'
      dragimg:'',

重置滑块状态：
this.isPass = false
      if (this.$refs.dragVerify != undefined) {
        this.$refs.dragVerify.reset();
      }

效果：

 

 

注意：1）、dragimg 我用static文件里面的静态文件资源发现图片不显示，把他改成base64格式的就好了

 2）、滑块左边的双箭头图标和滑块右边的对勾图标，刷新图标都不显示，可以在阿里图标库去下载