vue-drag-verify: A Vue repository from sailei1

基于vue-drag-verify二次开发的vue组件

需对父元素或html设置user-select: none

使用方法

引入升级包

a. 使用npm（推荐）

// 基本滑块验证组件
npm i vue-drag-verify2 -S
// 图片滑块组件
npm i vue-drag-verify-img -S
// 基本滑块验证组件(拼图)
npm i vue-drag-verify-img-chip -S
// 旋转图片滑块组件
npm i vue-drag-verify-img-rotate -S

b. 按需引入对应组件（适合二次开发）

// 基本滑块验证组件
import dragVerify from "@/components/dragVerify";
// 图片滑块组件
import dragVerifyImg from "@/components/dragVerifyImg";
// 图片滑块组件(拼图)
import dragVerifyImgChip from "@/components/dragVerifyImgChip";
// 旋转图片滑块组件
import dragVerifyImgRotate from "@/components/dragVerifyImgRotate";

components{
   dragVerify,
   dragVerifyImg,
   dragVerifyImgChip,
   dragVerifyImgRotate
}

引入以下代码

<drag-verify
  ref="dragVerify"
  :isPassing.sync="isPassing2"
  text="请按住滑块拖动"
  successText="验证通过"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  >
</drag-verify>

<drag-verify-img 
  ref="dragVerify"
  :imgsrc="img"
  :isPassing.sync="isPassing"
  :showRefresh="true"
  text="请按住滑块拖动"
  successText="验证通过"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  @refresh="reimg"
  @passcallback="pass"
  >
</drag-verify-img>

如图片与项目非同源，需要图片服务设置header("Access-Control-Allow-Origin: *");

<drag-verify-img-chip 
  ref="dragVerify"
  :imgsrc="img"
  :isPassing.sync="isPassing"
  :showRefresh="true"
  text="请按住滑块拖动"
  successText="验证通过"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  @refresh="reimg"
  @passcallback="pass"
  >
</drag-verify-img-chip>

<drag-verify-img-rotate 
  ref="dragVerify"
  :imgsrc="img"  
  :isPassing.sync="isPassing"
  :showTips="true"
  text="请按住滑块拖动"
  successText="验证通过"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  @refresh="reimg"
  >
</drag-verify-img-rotate>

演示和文档

sailei1/vue-drag-verify

基于vue-drag-verify二次开发的vue组件

使用方法