0.1.2 • Published 6 years ago
vue-slider-captcha v0.1.2
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 | 点击刷新回调 | - |