os-verify 滑动验证

安装

npm i os-verify -S

引入

import OsVerify from 'os-verify'
import 'os-verify/lib/os-verify.css'
Vue.use(OsVerify)

案例

<template>
  <div>
    <os-verify :acquire="captchasGet" :verify="loginCaptcha"></os-verify>
  </div>
</template>

<script>
    import {Captcha} from "../api/verify.js"; //封装接口
    export default {
        methods: {
            /**
             * 获取验证码
             */
            async captchasGet (data) {
                return await Captcha.getCaptchas(data)
            },
            /**
             * 拼图校验
             */
            async loginCaptcha (data) {
                return await Captcha.captchaCheck(data)
            },
        },
    }
</script>

参数

参数           类型        说明

mode           String      显示方式 弹出框 pop(默认)  固定 fixed

explain        String      滑动条提示文字 默认:向右滑动完成验证

captchaType    String      验证类型 滑动 blockPuzzle(默认) 文字clickWord

vSpace         Number      验证码图片和移动条容器的间隔，默认:5 (px)

imgSize        Object      其中包含了width、height两个参数，分别代表图片的宽度和高度 默认:{width:'310px',height:'155px'}

defaultImg     String      设置默认背景图片

方法（必须）

事件名称         说明

captchasGet      获取验证码方法 post请求

loginCaptcha     校验验证码方法 post请求

回调方法

回调方法        参数                      说明

checkout        (e)获取验证码返回的参数   获取滑动验证码的回调方法

success         (e)验证成功返回的参数     拼图校验成功回调方法

closeClick       -                        关闭滑动验证