vue-drag-verify-img
基于vue-drag-verify二次开发的vue图片滑块验证组件
683
382
| Install | |
|---|---|
npm install vue-drag-verify-img |
|
| Latest Version: | 1.1.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/#/dragimg
Installation
npm i vue-drag-verify-img -S
Usage
import dragVerifyImg from 'vue-drag-verify-img'
components:{
dragVerifyImg
}
<drag-verify-img
ref="dragVerify"
:imgsrc="img"
:isPassing.sync="isPassing"
handlerIcon="fa fa-angle-double-right"
successIcon="fa fa-check-circle-o"
refreshIcon="fa fa-refresh"
@passcallback="handlePass"
>
</drag-verify-img>
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| isPassing | 验证状态(支持.sync) | boolean | true / false | false |
| 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 |
| imgsrc | 图片地址 | string | — | — |
| barWidth | 拼图宽度，同拼图高度 | number | 40 | 40 |
| barRadius | 拼图外部圆形半径 | number | 8 | 8 |
| showRefresh | 是否右上角显示刷新 | boolean | true / false | false |
| refreshIcon | 刷新按钮图标的class | string | el-icon-refresh-right | — |
| showTips | 是否显示底部提示 | boolean | true / false | true |
| successTip | 底部验证通过提示 | string | 验证通过 | 验证通过 |
| failTip | 底部验证失败提示 | string | 验证失败 | 验证失败，拖动滑块将悬浮图像正确合并 |
| diffWidth | 在此范围内松开计算验证成功(单位px) | number | 10 | 10 |
Events
| 事件名称 | 说明 | 回调参数 | 备注 |
|---|---|---|---|
| passcallback | 验证通过 | — | |
| passfail | 验证失败 | — | 1.0.3新增 |
| refresh | 点击刷新回调 | — |
Mthods
| 方法名 | 说明 | 参数 |
|---|---|---|
| reset | 还原未验证通过时的状态 | — |
Development
npm run dev
## build
npm run build
License
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 1.1.0 | ^2.5.11 | MIT | |
| 1.0.3 | ^2.5.11 | MIT | |
| 1.0.2 | ^2.5.11 | MIT | |
| 1.0.1 | ^2.5.11 | MIT | |
| 1.0.0 | ^2.5.11 | MIT |