使用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 Base类 包含基本的方法
Jul 22 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
layui实现动态和静态分页
Apr 28 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
详解vuex状态管理模式
Nov 01 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
dedecms系统常用术语汇总
2007/04/03 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
js操作二进制数据方法
2018/03/03 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
在Python中使用正则表达式的方法
2015/08/13 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
PyTorch预训练的实现
2019/09/18 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
numpy 声明空数组详解
2019/12/05 Python
python3爬取torrent种子链接实例
2020/01/16 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
婚纱店策划方案
2014/05/22 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
python flask框架快速入门
2021/05/14 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL