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

 

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

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
发布了70 篇原创文章 · 获赞 44 · 访问量 9万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览