slider-verify-code

Quick Start

1. Import slider-verify-code into your vue.js project.

npm install slider-verify-code --S

import Vue from 'vue';
import SlideVerify from 'slider-verify-code';

Vue.use(SlideVerify);

2. Now you have it. The simplest usage:

<slide-verify :w="310"
            :h="155"
            @success="onSuccess"
            ></slide-verify>
<div>{{msg}}</div>

export default {
        name: 'App',
        data(){
            return {
                succ: false,
            }
        },
        methods: {
            onSuccess(){
                this.succ = true
            }
        }
    }

argument

Param	Type	Describe
w	Number	canvas width
h	Number	canvas height
imgs	Array	picture array 背景图数组，默认值 []
accuracy	Number	滑动验证的误差范围，默认值 5
show	Boolean	是否显示刷新按钮，默认值 true

callBack

Event	Type	Describe	Version
success	Function	success callback

内置方法

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

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

this.$refs.slider.reset();