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

github:https://github.com/langyuxiansheng/slider-verification-code 

对的,就是滑块验证码.

我做了一个比较简单的,在网上看了一些轮子,居然不是完全适用的,然后借鉴了一部分,然后封装为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 进行绑定

<SliderVerificationCode v-model="value" />

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用法

<SliderVerificationCode v-model="value">
    <template slot="content">
        {{ content }}
    </template>
    <template slot="icon">
        <i class="icon icon-test" />
    </template>
</SliderVerificationCode>

 图片展示效果:

 

 

其它说明:

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

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

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

在线演示: https://langyuxiansheng.github.io/slider-verification-code/

更新日志

• 2019年7月09日 v1.0.0

1. 建立项目,发布到npm

• 2019年9月26日 v1.0.1

1. 修复改变高度后滑块显示异常;
2. 新增自定义解锁前后的值;
3. 新增自定义滑块高度和宽度.
4. v1.0.0的源码在 v1.0.0的分支上.

• 2019年11月27日 v1.0.2

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

• 2019年11月28日 v1.0.3

1. 修复滑块宽度缩小漏出背景色的bug;
2. 修复屏幕宽度缩小后进度条显示异常;
3. 修复重置值之后,样式未初始化的bug;
4. 感谢各位道友的反馈.o(￣︶￣)o