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 | 点击刷新回调 | - |

演示