vue点击页面空白处实现保存功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
<人物>
<强>功能描述
双击表格一行实现表格编辑,点击空白处实现保存。
表格可编辑相关文章在可编辑表格
<强>实现思路
当表格在编辑状态的时候在页面进行点击监听,判断点击区域是否为编辑区域,如果不是编辑区域实现保存功能并取消点击监听
<强>功能点一:页面监听与取消接听
//,通过addEventListener与removeEventListener实现
document.addEventListener (“click",函数,,假);
document.removeEventListener (“click",函数,,假), <强>功能点二:判断点击区域是否为可编辑区域
该功能点有一定难度,首先你需要判断点击区域是否为表格区域,其次你要判断点击的区域是否为编辑状态的呢一行,所以我分为两步去实现
1,判断点击区域是否为表格区域
该功能点通过包含接口实现。判断条件为<强> tableDom.contains(目标)强;该接口可以判断目标是否为tableDom的子节点。
//,首先通过addEventListener 传入点击的dom区域
document.addEventListener (
,“click",=,e 祝辞,{
this.judgeClickDom才能(e);
},
,假
,);//,this.bindClick是为了取消监听,下文会进行描述//,判断点击是否为表区域
judgeClickDom (e), {
{,const target },=, e;
,let tableDom =, document.getElementsByClassName (“table");
,//,getElementsByClassName获取到的是数组,一定要有下标不然会报的错//,如果我们点击的区域在表格外保存数据
(!,if tableDom [0] .contains(目标),{
,this.saveTableData ();
,}
}, 2。判断点击区域是否为编辑状态的那一行
该功能借助了元素框架,如何标记编辑状态行,在可编辑表格中已有介绍
取消监听
由于我们监听点击时使用的是箭头函数,没有函数名或者函数表达式,所以在取消监听的时候会出现问题。我的解决方案是给他绑定一个全局变量bindClick。代码如下
//,开始监听
document.addEventListener (“click"
,(this.bindClick =, e =祝辞,{
,,…
,})
);//,取消监听
document.removeEventListener (“click", this.bindClick); 关于vue点击页面空白处实现保存功能问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。
