Vue开源插件之滑块验证

14,378 阅读2分钟

前言

大家好,我是六六。之前项目中用到别人的滑动验证组件,有点卡卡的,所幸就自己写一个呗。今天就分享给大家。目前只是大概的第一版,可能各方面都有不足,大家努力努力提提意见哈,争取做到最完美哈哈。所以第一板块就是更新类容啦,请大家给个关注吧,多多支持。

演示

成功:

失败:

失败过多:

初始化:

目录:

  • 更新内容及版本
  • 安装及使用
  • 遇到的问题
  • 开源插件及上传npm
  • 下个版本更新内容
  • 总结

1.更新内容及版本:

版本号:

 v- 0.0.1

更新时间:

2020.7.28

更新内容

实现了滑动验证功能。

2.安装及使用:

安装:

npm install huakuai-vue --save

main.js使用:

import huakuai from 'huakuai-vue'
Vue.use(huakuai)

全局就可以使用了,不需要在注册

<hua-kuai></hua-kuai>

事件参数:

事件名 类型 描述
verify 事件 判断用户滑动验证是否通过,成功为true,失败三次为false
refresh 事件 用户失败三次点击了初始化按钮

示例:

<template>
  <div class=''>
    <hua-kuai @verify='verify' @refresh='refresh'></hua-kuai>
  </div>
</template>
<script>
// import huakuai from './components/huakuai'
export default {
  // components:{
  //   huakuai
  // }
  methods:{
    verify(result){
      console.log(result) // result为true表示验证通过,false表示验证三次都失败了哦
    },
    refresh(){
      console.log('用户点击了初始化')
    }
  }
}
</script>
<style scoped>

</style>

3.遇到的问题:

1.获取坐标值问题

最开始一直使用的是offsetLeft来确定坐标及偏移量,但一直有bug存在,偏移量时不时为0,
最后使用clientx成功解决。

2.点击图片会发生拖拽效果

在img标签加一个属性即可:ondragstart="return false;"

3.双击两下会选中文字

document.onselectstart=()=> false

4.实现原理其实很简单

一开始写这个的时候用的是canvas技术,各种计算坐标值,到最后设计的还很丑,
直到有一天发现是叠加两张照片就可以实现了,晕~,github里有一个canvas实现的版本,

如何开源及上传npm:

传送门:vue-loading插件开发+npm部署

4.下个版本更新内容

1.ui优化
2. 可以定制化移动图片
3.增加显示的模式
4.删除水印
5.兼容手机端

5.总结

下个版本应该趋向完美了,也是比较大的改动吧,大家多支持一下啦。
使用中遇到问题,及时留言,我会第一时间来解决的。
开源是我的爱好,六六会坚持下去的,给个关注呗~