vue-slider-captcha
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 | 点击刷新回调 | - |
Dependencies
Dependencies
@vue/cli-plugin-babel: ~4.3.0@vue/cli-plugin-eslint: ~4.3.0@vue/cli-service: ~4.3.0@vue/eslint-config-standard: ^5.1.2babel-eslint: ^10.1.0babel-plugin-import: ^1.13.0eslint: ^6.7.2eslint-plugin-import: ^2.20.2eslint-plugin-node: ^11.1.0eslint-plugin-promise: ^4.2.1eslint-plugin-standard: ^4.0.0eslint-plugin-vue: ^6.2.2less: ^3.11.1less-loader: ^6.1.0vue-svg-loader: ^0.16.0vue-template-compiler: ^2.6.11