vue项目中滑块验证功能实现--安装vue-monoplasty-slide-verify包

 

vue登录滑动验证

1、引入vue-monoplasty-slide-verify组件到项目里

先使用命令行安装：npm install --save vue-monoplasty-slide-verify

2、在main.js目录下添加代码

import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

3、在页面中使用

<slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            ></slide-verify>
<div>{{msg}}</div>

export default {
   name: 'App',
    data(){
        return {
            msg: ''
        }
    },
    methods: {
        onSuccess(){
            this.msg = 'login success'
        },
        onFail(){
            this.msg = ''
        },
        onRefresh(){
            this.msg = ''
        }
    }
}

prop参数说明
参数 类型 备注
l Number 滑块边长
r Number 滑块突出圆形半径
w Number canvas width
h Number canvas height
sliderText String 滑块底部文字
imgs Array picture array 背景图数组，默认值 []
accuracy Number 滑动验证的误差范围，默认值 5
show Boolean 是否显示刷新按钮，默认值 true

回调函数
回调函数 备注
success success callback（返回时间参数，单位为毫秒）
fail fail callback
refresh 点击刷新按钮后的回调函数
again 检测到非人为操作滑动时触发的回调函数
fulfilled 刷新成功之后的回调函数

组件链接
gitee链接：https://gitee.com/monoplasty/vue-monoplasty-slide-verify?_from=gitee_search