码迷,mamicode.com
首页 > 其他好文 > 详细

滑动验证码

时间:2019-11-01 20:21:29      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:pos   inf   token   nta   ring   slide   技术   UNC   http   

目前仅前端实现,支持移动端滑动事件。版本V1.0.5

技术图片
github文档地址: https://github.com/monoplasty/vue-monoplasty-slide-verify

安装

npm install --save vue-monoplasty-slide-verify

使用方法
// main.js
import Vue from ‘vue‘;
import SlideVerify from ‘vue-monoplasty-slide-verify‘;

Vue.use(SlideVerify);
// template
<slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            :slider-text="text"
            ></slide-verify>
<div>{{msg}}</div>
// script
export default {
   name: ‘App‘,
    data(){
        return {
            msg: ‘‘,
            text: ‘向右滑‘,
        }
    },
    methods: {
        onSuccess(){
            this.msg = ‘login success‘
        },
        onFail(){
            this.msg = ‘‘
        },
        onRefresh(){
            this.msg = ‘‘
        }
    }
}

参数说明

props传参(均为可选)

参数类型默认值描述
l Number 42 滑块的边长
r Number 10 滑块突出圆的半径
w Number 310 canvas画布的宽
h Number 155 canvas画布的高
sliderText String Slide filled right 滑块底纹文字

自定义回调函数

事件名类型描述
success Function 验证码匹配成功的回调
fail Function 验证码未匹配的回调
refresh Function 刷新按钮的回调

 

如有什么问题欢迎issue或者留言。

 
技术图片

滑动验证码

标签:pos   inf   token   nta   ring   slide   技术   UNC   http   

原文地址:https://www.cnblogs.com/caiwenjun/p/11779199.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!