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 相关文章推荐
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
iview实现图片上传功能
Jun 29 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得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
python实现外卖信息管理系统
2018/01/11 Python
图解Python变量与赋值
2018/04/03 Python
Python中字符串List按照长度排序
2019/07/01 Python
python数据归一化及三种方法详解
2019/08/06 Python
pycharm配置git(图文教程)
2019/08/16 Python
python3获取url文件大小示例代码
2019/09/18 Python
python实现学生成绩测评系统
2020/06/22 Python
对python中list的五种查找方法说明
2020/07/13 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
给同学的道歉信
2014/01/16 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
《悯农》教学反思
2014/04/28 职场文书
北京奥运会主题口号
2014/06/13 职场文书
志愿者宣传口号
2014/06/17 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis