1.0.1 • Published 4 years ago

vue-zyd-slide-verify v1.0.1

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

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

argument

ParamTypeDescribe
lNumberblock length
rNumberblock circle radius
wNumbercanvas width
hNumbercanvas height
sliderTextStringSlide filled right

callBack

EventTypeDescribe
successFunctionsuccess callback
failFunctionfail callback
refreshFunctionrefresh button callback

Log

V1.0.2

  • Mobile terminal touch event support

V1.0.5

  • add slider text
1.0.1

4 years ago

1.0.0

4 years ago