slider-verify-code

Quick Start

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

1npm install slider-verify-code --S

1import Vue from 'vue';
2import SlideVerify from 'slider-verify-code';
3
4Vue.use(SlideVerify);

2. Now you have it. The simplest usage:

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

1export default {
2        name: 'App',
3        data(){
4            return {
5                succ: false,
6            }
7        },
8        methods: {
9            onSuccess(){
10                this.succ = true
11            }
12        }
13    }

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() 方法

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

1this.$refs.slider.reset();