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遍历input取得input的name
Apr 27 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
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页面缓存ob系列函数介绍
2012/10/18 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
php判断访问IP的方法
2015/06/19 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
python删除特定文件的方法
2015/07/30 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
Python continue继续循环用法总结
2018/06/10 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
公司司机岗位职责范本
2014/03/03 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
党员教师工作决心书
2014/03/13 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
大学生军训感言
2015/08/01 职场文书
党员理论学习心得体会
2016/01/21 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis