vue 插件 滑块验证_一款基于vue开发的简单图片滑块验证码

有部分项目里会出现这样的一个功能:

对的,就是滑块验证码.

我做了一个比较简单的,在网上看了一些轮子,居然不是完全适用的,然后借鉴了一部分,然后封装为vue的组件.

废话不多说,直接上代码:

直接安装使用

npm i slider-verification-code --save

import SliderVerificationCode from 'slider-verification-code';

import 'slider-verification-code/lib/slider-verification-code.css';

Vue.use(SliderVerificationCode);

1. 直接使用v-model 进行绑定

2. 也可以使用 @change="handleChange"  进行回调

methods:{

handleChange(value){

console.log('您验证结果为:',value);

}

}

3. props 属性可选值

icon: { //滑块图标

type: [String],

default: null

},

activeValue: { //滑块解锁后的值

type: [String,Boolean,Number,Object],

default: true

},

inactiveValue: { //滑块解锁前的值

type: [String,Boolean,Number,Ob