vue点击页面空白处实现保存功能


Posted in Javascript onNovember 06, 2019

vue点击页面空白处实现保存功能 

功能描述

双击表格一行实现表格编辑,点击空白处实现保存。

表格可编辑相关文章在可编辑表格

实现思路

当表格在编辑状态的时候在页面进行click监听,判断点击区域是否为编辑区域,如果不是编辑区域实现保存功能并取消click监听

功能点一:页面监听与取消接听

// 通过addEventListener与removeEventListener实现
document.addEventListener("click", function, false);
document.removeEventListener("click", function, false);

功能点二:判断点击区域是否为可编辑区域

该功能点有一定难度,首先你需要判断点击区域是否为表格区域,其次你要判断点击的区域是否为编辑状态的呢一行。所以我分为两步去实现

1、判断点击区域是否为表格区域

该功能点通过 contains 接口实现。判断条件为 tableDom.contains(target) ;该接口可以判断target是否为tableDom的子节点。

// 首先通过addEventListener 传入点击的dom区域
document.addEventListener(
 "click",
 e => {
  this.judgeClickDom(e);
 },
 false
 );
// this.bindClick是为了取消监听,下文会进行描述

// 判断点击是否为table区域
judgeClickDom(e) {
 const { target } = e;
 let tableDom = document.getElementsByClassName("table");
 
// getElementsByClassName获取到的是数组,一定要有下标不然会报错

// 如果我们点击的区域在表格外保存数据
 if (!tableDom[0].contains(target)) {
 this.saveTableData();
 }
},

2.判断点击区域是否为编辑状态的那一行

该功能借助了element框架, 如何标记编辑状态行,在可编辑表格中已有介绍

取消监听

由于我们监听click时使用的是箭头函数,没有函数名或者函数表达式,所以在取消监听的时候会出现问题。 我的解决方案是给他绑定一个全局变量bindClick。 代码如下

// 开始监听
document.addEventListener("click",
 (this.bindClick = e => {
  ...
 })
);

// 取消监听
document.removeEventListener("click", this.bindClick);

总结

以上所述是小编给大家介绍的vue点击页面空白处实现保存功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript下function声明一些小结
Dec 28 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
Javascript中的 “&” 和 “|” 详解
Feb 02 Javascript
Vue通过input筛选数据
Oct 26 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 #Javascript
微信小程序网络请求实现过程解析
Nov 06 #Javascript
vue 自定义右键样式的实例代码
Nov 06 #Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 #Javascript
vue 解决computed修改data数据的问题
Nov 06 #Javascript
微信小程序页面渲染实现方法
Nov 06 #Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 #Javascript
You might like
详解PHP错误日志的获取方法
2015/07/20 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
js实现下一页页码效果
2017/03/07 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
举例讲解Python常用模块
2019/03/08 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
python压包的概念及实例详解
2021/02/17 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
大学生家政服务项目创业计划书
2014/01/30 职场文书
个人融资协议书
2014/10/02 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书