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,Object],

default: false

},

content: { //滑块的文字

type: [String],

default: `请拖动滑块解锁`

},

height: { //高度

type: [String],

default: `40px`

},

sliderWidth: { //滑块宽度

type: [String],

default: `40px`

},

background: { //高度

type: [String],

default: `#e8e8e8`

},

textColor: { //滑块的文字颜色

type: [String],

default: `#fff`

}

4. solt用法

{{ content }}

图片展示效果:

其它说明:

这个插件是前端验证,安全系数不一定高,需要做服务端验证的小伙伴可以自己做二次开发.

后期项目更新时,同步更新插件,会有自定义的初始值和验证通过后的值.

关于重置: 重置滑块只需要将v-model绑定的值设置为初始值即可重置.

更新日志

2019年7月09日 v1.0.0

建立项目,发布到npm

2019年9月26日 v1.0.1

修复改变高度后滑块显示异常;

新增自定义解锁前后的值;

新增自定义滑块高度和宽度.

v1.0.0的源码在 v1.0.0的分支上.

2019年11月27日 v1.0.2

新增兼容移动端的事件绑定;

2019年11月28日 v1.0.3

修复滑块宽度缩小漏出背景色的bug;

修复屏幕宽度缩小后进度条显示异常;

修复重置值之后,样式未初始化的bug;

感谢各位道友的反馈.o(￣︶￣)o