1 Star 0 Fork 117

mtldcode / vue-monoplasty-slide-verify

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

vue-monoplasty-slide-verify

A Vue plugin to slide verify Demo

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm 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

Param Type Describe Version
l Number block length
r Number block circle radius
w Number canvas width
h Number canvas height
sliderText String Slide filled right 1.0.5
imgs Array picture array 背景图数组,默认值 [] 1.1.0
accuracy Number 滑动验证的误差范围,默认值 5 1.1.1
show Boolean 是否显示刷新按钮,默认值 true 1.1.1

callBack

Event Type Describe Version
success Function success callback 返回时间参数,单位为毫秒
fail Function fail callback
refresh Function 点击刷新按钮后的回调函数
again Function 检测到非人为操作滑动时触发的回调函数 1.1.1
fulfilled Function 刷新成功之后的回调函数 1.1.1

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>

空文件

简介

基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/mtldcode/vue-monoplasty-slide-verify.git
git@gitee.com:mtldcode/vue-monoplasty-slide-verify.git
mtldcode
vue-monoplasty-slide-verify
vue-monoplasty-slide-verify
master

搜索帮助

14c37bed 8189591 565d56ea 8189591