vue-slider-captcha 滑动验证
使用方法
npm i vue-slider-captcha
import VueSliderCaptcha from "vue-slider-captcha";
components{
VueSliderCaptcha
}
引入以下代码
<VueSliderCaptcha
ref="sliderCaptcha"
v-model="status"
:src="src"
:sliderSrc="sliderSrc"
:y="y"
color="#1890ff"
@on-refresh="onRefresh"
@on-finish="onFinish"
></VueSliderCaptcha>
API
props
| 参数 |
说明 |
type |
默认值 |
| value |
验证状态 |
Boolean |
false |
| tip |
初始文字 |
String |
向右拖动滑块填充拼图 |
| successTip |
成功提示文字 |
String |
验证通过 |
| failTip |
成功提示文字 |
String |
拖动滑块将悬浮图像正确合并 |
| color |
主题颜色 |
String |
#76c61d |
| src |
后台返回随机背景图片地址（base64 png 400*200） |
String |
- |
| sliderSrc |
后台返回随机滑块图片地址（base64 png ） |
String |
- |
| y |
后台返回随机生成 Y 轴的偏移量 |
Number |
- |
methods
| 参数 |
说明 |
type |
默认值 |
| onReset |
重置验证状态 |
|
- |
event
| 事件名称 |
说明 |
回调参数 |
| on-finish |
点击刷新回调 |
- |
演示