vue-drag-verify2

基于vue-drag-verify二次开发的vue滑块验证组件【支持vue3】
3,755 383
vue-drag-verify 滑动验证
Install
npm install vue-drag-verify2
Latest Version:1.2.0
Vue:2
License:MIT
Last Updated:Apr 21, 2021
Links: GitHub  ·  npm
Maintainer: yimijianfang

vue-drag-verify

基于vue-drag-verify二次开发的vue滑块验证组件.

Demo

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

Installation

npm i vue-drag-verify2 -S

Usage

import dragVerify from 'vue-drag-verify2'

components:{
  dragVerify
}

<drag-verify
  ref="dragVerify"
  :isPassing.sync="isPassing"
  handlerIcon="fa fa-angle-double-right"
  successIcon="fa fa-check-circle-o"
  @passcallback="handlePass"
>
</drag-verify>

main

Attributes

参数 说明 类型 可选值 默认值
width 宽度 number — 250
height 高度 number — 40
text 初始文字 string — swiping to the right side
successText 成功提示文字 string — success
background 滑块右侧背景色 string #eee / red / rgba(52,52,52,0.7) #eee
progressBarBg 滑块左侧背景色 string #76c61d / white / rgba(52,52,52,0.7) #76c61d
progressBarBg 滑块左侧背景色 string #76c61d / white / rgba(52,52,52,0.7) #76c61d
handlerBg 滑块背景色 string #fff / white / rgb(255,255,255) #fff
completedBg 验证通过背景色 string #76c61d / white / rgba(52,52,52,0.7) #76c61d
circle 两侧是否圆形 boolean true / false false
radius 圆角 string 4px / 4% 4px
handlerIcon 滑块未验证通过时的图标,根据所选框架设置不同class string el-icon-d-arrow-right —
successIcon 滑块验证通过时的图标,根据所选框架设置不同class string el-icon-circle-check —
textSize 文字大小 string 14px / 4em 14px
textColor 文字颜色 string #333 / gray / rgb(52,52,52) #333

Slots

name 说明
textBefore 提示文字前
textAfter 提示文字后

Events

事件名称 说明 回调参数 备注
passcallback 验证通过 —
passfail 验证失败 — 1.0.7新增

Mthods

方法名 说明 参数
reset 还原未验证通过时的状态 —

Development

npm run dev

## build
npm run build

License

MIT

Related Packages

vue-drag-verify-img-chip

基于vue-drag-verify二次开发的vue滑块验证组件

2,395 382
滑动验证 vue-drag-verify-img-chip 拼图验证
vue-drag-verify-img

基于vue-drag-verify二次开发的vue图片滑块验证组件

683 382
滑动验证 vue-drag-verify-img 图片滑动验证
vue-sliding-puzzle

基于 Vue 3 的滑动拼图验证码组件，支持干扰图、时间判定等安全特性

3,102 0
滑动验证 anti-bot captcha component puzzle-captcha security slider-captcha sliding-puzzle typescript verification +6

Version History

Version Released Vue License
1.2.0 ^2.5.11 MIT
1.1.0 ^2.5.11 MIT
1.0.7 ^2.5.11 MIT
1.0.6 ^2.5.11 MIT
1.0.5 ^2.5.11 MIT