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();