vue-monoplasty-slide-verify

A Vue plugin to slide verify Demo

Build Setup

# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build

Quick Start

1. Import vue-monoplasty-slide-verify into your vue.js project.

Using build tools:

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

import Vue from 'vue';import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);

2. Now you have it. The simplest usage:

<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 = ''
            }
        }
    }

argument

callBack

Document

国内镜像地址 gitee镜像地址

更新记录

V1.1.3 描述

• 解决IE 9 - 10 滑块显示bug，感谢大神 @Guosugaz 修复此bug ? issue#26

• 修复 滑块成功后依然能滑动bug

• 优化 图片未加载完成之前加载遮罩层

• 增加滑动成功后的时间显示。单位毫秒。issue#24

V1.1.1 描述（此版本有bug,请使用最新版）

• accuracy 精度设置

判断滑块与凹槽位置的误差范围值，默认取值范围为 [1, 10]。若取值不为 -1，则会开启检测非人为操作。人为操作也有可能会触发哦！

判断依据是：滑块的一系列移动坐标的平均值和方差是否相等。若相等则人为是非人为操作。

若accuracy为 -1，则表示关闭检测非人为操作，默认开启。开启之后，若检测到为非人为操作，则会触发 again 回调函数

V1.1.0 版本新增属性imgs：

• 当imgs不传或者传空数组时，图片库默认使用第三方api提供的图片路径。可能加载缓慢；

• 当imgs传本地路径时，确保图片路径是否正确。建设传cdn上的图片地址。

• 详情可参考APP.vue上的写法。或在线查看demo地址

内置方法

• 在父组件里如果需要重置，可以在父组件中调用子组件reset() 方法

<slide-verify ref="slideblock" ></slide-verify>

this.$refs.slideblock.reset();

Log

V1.1.2

1. 修复imgs不传时，页面的 warning 问题

V1.1.1 （此版本有bug,请使用最新版）

1. 增加滑动验证的精度设置

2. 增加滑块刷新成功后的回调函数

3. 可配置刷新按钮的显示

4. 可配置是否开启非人为操作（防止非人为操作滑动解锁）

V1.1.0

• add img array (增加可配置的图片地址接口)

V1.0.5

• add slider text (增加可自定义滑块文本)

V1.0.2

• Mobile terminal touch event support (支持移动端事件)

example

可参考如下用法：

<template>
  <slide-verify ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :slider-text="text" :accuracy="accuracy"></slide-verify>
  <button @click="handleClick">在父组件可以点我刷新哦</button>
  <div>{{msg}}</div>
</template>

<script>
    export default {
        name: 'App',
        data(){
            return {
                msg: '',
                text: '向右滑动->',
                // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
                accuracy: 1,
            }
        },
        methods: {
            onSuccess(times){
                console.log('验证通过，耗时 +' times + '毫秒');
                this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
            },
            onFail(){
                console.log('验证不通过');
                this.msg = ''
            },
            onRefresh(){
                console.log('点击了刷新小图标');
                this.msg = ''
            },
            onFulfilled() {
                console.log('刷新成功啦！');
            },
            onAgain() {
                console.log('检测到非人为操作的哦！');
                this.msg = 'try again';
                // 刷新
                this.$refs.slideblock.reset();
            },
            handleClick() {
                this.$refs.slideblock.reset();
            },
        }
    }
</script>

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码

输入验证码后可免费复制

付费复制 免费复制 付费复制

付费后30天内不限量复制

价格:元

支付宝支付

联系客服