Score
0
Watch 10 Star 48 Fork 11

monoplasty / vue-monoplasty-slide-verifyJavaScriptApache-2.0

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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

Document

内置方法

  • 在父组件里如果需要重置,可以在父组件中调用子组件reset() 方法
<slide-verify ref="slideblock" ></slide-verify>
this.$refs.slideblock.reset();
  • V1.0.6 版本新增属性imgs
    • imgs不传或者传空数组时,图片库默认使用第三方api提供的图片路径。可能加载缓慢;
    • imgs传本地路径时,确保图片路径是否正确。建设传cdn上的图片地址。
    • 详情可参考APP.vue上的写法。或在线查看demo地址
  • gitee镜像地址

argument

Param Type Describe
l Number block length
r Number block circle radius
w Number canvas width
h Number canvas height
sliderText String Slide filled right
imgs Array picture array

callBack

Event Type Describe
success Function success callback
fail Function fail callback
refresh Function refresh button callback

Log

V1.0.2

  • Mobile terminal touch event support

V1.0.5

  • add slider text

V1.1.0

  • add img array

Comments ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/monoplasty/vue-monoplasty-slide-verify.git
git@gitee.com:monoplasty/vue-monoplasty-slide-verify.git
monoplasty
vue-monoplasty-slide-verify
vue-monoplasty-slide-verify
master

Help Search