前言
大家好,我是六六。之前项目中用到别人的滑动验证组件,有点卡卡的,所幸就自己写一个呗。今天就分享给大家。目前只是大概的第一版,可能各方面都有不足,大家努力努力提提意见哈,争取做到最完美哈哈。所以第一板块就是更新类容啦,请大家给个关注吧,多多支持。
演示
成功:
失败:
失败过多:
初始化:
目录:
- 更新内容及版本
- 安装及使用
- 遇到的问题
- 开源插件及上传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.总结
下个版本应该趋向完美了,也是比较大的改动吧,大家多支持一下啦。
使用中遇到问题,及时留言,我会第一时间来解决的。
开源是我的爱好,六六会坚持下去的,给个关注呗~