使用konva和vue-konva库实现拖拽滑块验证功能


Posted in Javascript onApril 27, 2020

1. 在vue项目中安装konvavue-konva

npm install konva vue-konva --save-dev

2. 引入vue-konva

import VueKonva from ‘vue-konva';

Vue.use(VueKonva)

3. 创建单独的滑块验证组件 Captcha.vue,在相应的页面中引入使用即可

<template>
 <v-stage :config="Config.stage">
  <v-layer ref="layer">
   <!-- 背景组 -->
   <v-group :config="Config.group">
    <v-rect :config="Config.rect"></v-rect>
    <v-text :config="Config.text"></v-text>
   </v-group>
   <!-- 遮罩层组 -->
   <v-group :config="Config.group">
    <v-rect :config="Config.coverRect" ref="coverRect"></v-rect>
    <v-text :config="Config.coverText" v-if="success" ref="coverText"></v-text>
   </v-group>
   <!-- 滑块组 -->
   <v-group :config="Config.moveGroup" ref="moveGroup" @mouseover="moveGroupMouseOver" @mouseout="moveGroupMouseOut" @mousedown="moveGroupMouseDown" @mouseup="moveGroupStop">
    <v-rect :config="Config.moveRect" ref="moveRect"></v-rect>
    <!-- 验证成功组 -->
    <v-group :config="Config.group" v-if="success">
     <v-circle :config="Config.succCircle" ref="succCircle"></v-circle>
     <v-line :config="Config.succLine"></v-line>
    </v-group>
    <v-group :config="Config.moveGroup_l" v-else>
     <v-line :config="Config.moveLine1"></v-line>
     <v-line :config="Config.moveLine2"></v-line>
    </v-group>
   </v-group>
  </v-layer>
 </v-stage>
</template>
<script>
/*
 * captchaConfig // 属性 {width:330, height: 36} 组件的宽高
 * eventCaptcha  // 验证成功的回调
 */
let _$mouseDown = false; // 鼠标是否在滑块组中按下,因为和html没有绑定,所以没有放在data中,并以_$开头
export default {
 props: {
  captchaConfig: {
   type: Object,
   default: () => ({
    width: 330, // 宽度
    height: 36, // 高度
   }),
  },
 },
 data() {
  const { width, height } = this.captchaConfig;
  let Config = {
   stage: {
    width: width,
    height: height,
   },
   group: {
    x: 0,
    y: 0,
   },
   rect: {
    width: width,
    height: height,
    fill: '#e8e8e8',
   },
   text: {
    x: 0,
    y: 0,
    width: width,
    height: height,
    text: '请按住滑块,拖动到最右边',
    fontSize: 14,
    fontFamily: '微软雅黑',
    align: 'center',
    lineHeight: parseFloat(height / 14),
   },
   //滑块组
   moveGroup: {
    draggable: true,
   },
   moveRect: {
    x: 0.5,
    y: 0.5,
    width: height - 1,
    height: height - 1,
    fill: '#fff',
    stroke: '#8d92a1',
    strokeWidth: 1,
   },
   moveGroup_l: {
    x: height / 3,
    y: height / 3,
   },
   moveLine1: {
    x: 0,
    y: 0,
    points: [0, 0, height / 6, height / 6, 0, height / 3],
    stroke: '#8d92a1',
    strokeWidth: 1,
    lineCap: 'round',
    lineJoin: 'round',
   },
   moveLine2: {
    x: height / 6,
    y: 0,
    points: [0, 0, height / 6, height / 6, 0, height / 3],
    stroke: '#8d92a1',
    strokeWidth: 1,
    lineCap: 'round',
    lineJoin: 'round',
   },
   //创建遮罩层组
   coverRect: {
    width: height / 2,
    height: height,
    fill: '#8d92a1',
    opacity: 0.8,
   },
   coverText: {
    x: 0,
    y: 0,
    width: width - height,
    height: height,
    align: 'center',
    text: '验证成功',
    fontSize: 14,
    fontFamily: '微软雅黑',
    fontStyle: 'bold',
    fill: '#fff',
    lineHeight: parseFloat(height / 14),
   },
   //验证成功组
   succCircle: {
    x: height / 2,
    y: height / 2,
    radius: height / 4,
    fill: '#8d92a1',
   },
   succLine: {
    points: [height / 2 - height / 4 / 2, height / 2, height / 2 - height / 4 / 8, height / 2 + height / 4 / 2, height / 2 + height / 4 / 2, height / 2 - height / 4 / 2],
    stroke: '#fff',
    strokeWidth: 1,
    lineCap: 'round',
    lineJoin: 'round',
   },
  };
  return {
   Config,
   success: 0, // 标记是否验证成功 0 失败 1 成功
  };
 },
 mounted() {
  // 给document绑定鼠标抬起事件
  document.addEventListener('mouseup', this.moveGroupStop);
  // 在组件注销的时候取消绑定
  this.$once('hook:beforeDestroy', () => {
   document.removeEventListener('mouseup', this.moveGroupStop);
  });
  // 给滑块组绑定拖拽监听
  this.$refs.moveGroup.getNode().dragBoundFunc((pos) => {
   const { width, height } = this.captchaConfig;
   let moveGroup = this.$refs.moveGroup.getNode();
   let moveRect = this.$refs.moveRect.getNode();
   let coverRect = this.$refs.coverRect.getNode();
 
   let moveX = moveGroup.getAttrs().x ? moveGroup.getAttrs().x : 0;
   coverRect.width(moveX + height / 2);
   if (pos.x >= width - height) {
    if (this.success == 0) {
     this.success = 1;
     this.$emit('eventCaptcha');
    }
    coverRect.opacity(1);
   }
   if (this.success == 0) {
    if (pos.x < 0) {
     return {
      x: 0,
      y: moveGroup.getAbsolutePosition().y,
     };
    } else if (pos.x > width - height) {
     return {
      x: width - height,
      y: moveGroup.getAbsolutePosition().y,
     };
    } else {
     return {
      x: pos.x,
      y: moveGroup.getAbsolutePosition().y,
     };
    }
   } else {
    return {
     x: width - height,
     y: moveGroup.getAbsolutePosition().y,
    };
   }
  });
 },
 methods: {
  // 鼠标进入滑块组
  moveGroupMouseOver() {
   document.body.style.cursor = 'pointer';
  },
  // 鼠标移出滑块组
  moveGroupMouseOut() {
   document.body.style.cursor = 'default';
  },
  // 鼠标按下
  moveGroupMouseDown() {
   _$mouseDown = true; // 只有在滑块组点击鼠标才被视作要点击滑动验证
  },
  // 鼠标抬起
  moveGroupStop(e) {
   if (!_$mouseDown) return;
   _$mouseDown = false;
   document.body.style.cursor = 'default'; // 鼠标恢复指针状态
   if (this.success == 0) {
    this.$refs.moveGroup.getNode().to({
     x: 0,
     duration: 0.3,
    });
    this.$refs.coverRect.getNode().to({
     width: this.captchaConfig.height / 2,
     duration: 0.3,
    });
   }
  },
 },
};
</script>

4. 最终效果

使用konva和vue-konva库实现拖拽滑块验证功能

使用konva和vue-konva库实现拖拽滑块验证功能

使用konva和vue-konva库实现拖拽滑块验证功能

简单的滑块验证功能实现,可直接在vue页面中引入使用。konva库:https://konvajs.org/

到此这篇关于使用konva和vue-konva完成前端拖拽滑块验证功能的实现代码的文章就介绍到这了,更多相关konva和vue-konva拖拽滑块验证内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 #Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 #Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 #Javascript
JS严格模式原理与用法实例分析
Apr 27 #Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 #Javascript
详解elementUI中input框无法输入的问题
Apr 27 #Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 #Javascript
You might like
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
Python正则表达式和re库知识点总结
2019/02/11 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
Order by的几种用法
2013/06/16 面试题
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
电气工程和自动化自荐信范文
2013/12/25 职场文书
亲子读书活动方案
2014/02/22 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
赢在执行观后感
2015/06/16 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
Javascript 解构赋值详情
2021/11/17 Javascript