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

最終效果如圖

功能描述

雙擊表格一行實現表格編輯，點擊空白處實現保存。

表格可編輯相關文章在可編輯表格

實現思路

當表格在編輯狀態的時候在頁面進行click監聽，判斷點擊區域是否爲編輯區域，若是不是編輯區域實現保存功能並取消click監聽

功能點一：頁面監聽與取消接聽

// 經過addEventListener與removeEventListener實現
document.addEventListener("click", function, false);
document.removeEventListener("click", function, false);
複製代碼

功能點二：判斷點擊區域是否爲可編輯區域

該功能點有必定難度，首先你須要判斷點擊區域是否爲表格區域，其次你要判斷點擊的區域是否爲編輯狀態的呢一行。因此我分爲兩步去實現

一、判斷點擊區域是否爲表格區域

該功能點經過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);
複製代碼

本篇文章參考了https://www.cnblogs.com/sefaultment/p/11749802.html