vue點擊頁面空白處實現保存功能

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點擊頁面空白處實現保存功能問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。