v-slider-verify

vue滑动验证效果

Usage no npm install needed!

<script type="module">
  import vSliderVerify from 'https://cdn.skypack.dev/v-slider-verify';
</script>

README

v-slide-verify

Quick Start

Using build tools:

npm install --save v-slider-verify

import Vue from 'vue';
import vSliderVerify from 'v-slider-verify';

Vue.use(vSliderVerify);

2. Now you have it. The simplest usage:

<v-slider-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
             @changeNum = "change"
            :sliderText="'请向右滑动'"
            :setNum = "10"
            ></v-slider-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

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
setNum Number default(20)

callBack

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

Log

V0.1.12