vue 3 單擊外部指令防止單擊內部時關閉特定內容（側邊欄）

Question

我在 vue 3 中使用此指令在外部單擊

export default {    
    beforeMount(el, binding, vnode) {
        el.clickOutsideEvent = function(event) {
            if (!(el === event.target || el.contains(event.target))) {
                binding.value(event, el);
            }
        };
        document.body.addEventListener('click', el.clickOutsideEvent);
    },
    unmounted(el) {
        document.body.removeEventListener('click', el.clickOutsideEvent);
    }
};

我將其中的大部分用於下拉菜單。 當單擊外部或單擊下拉列表中的項目時，它會關閉下拉列表。

我想在側邊欄上使用它，那里有一些輸入字段（選擇、收音機等……用於過濾）。

當我單擊按鈕以顯示側邊欄時，它會起作用，當在側邊欄外單擊時，它會關閉它。 該指令按應有的方式工作。

但是....我想在單擊側邊欄內容（任何地方）或單擊側邊欄的輸入元素時更改該指令（或專門為此側邊欄創建另一個指令）...不要關閉側邊欄（僅當單擊外部時邊欄來關閉它）。

我怎樣才能做到這一點？

更新

我正在考慮為側邊欄中的每個元素添加一個特定的 class 名稱並將其添加到 if 條件

if (!(el === event.target || el.contains(event.target) || event.target.classList.contains('specific-sidebar-class-name'))) 

Answer 1

我已經在側邊欄過濾器組件中添加了 id ....現在當點擊內部（側邊欄的任何地方）時它不會關閉

export default {    
  beforeMount(el, binding, vnode) {
    el.clickOutsideEvent = function(event) {
      let sidebarFilter = document.getElementById('sidebar-filter-component')
      let clickedInsideSidebar = sidebarFilter && (event.target === sidebarFilter || sidebarFilter.contains(event.target))      
        
      if (!(el === event.target || el.contains(event.target) || clickedInsideSidebar)) {
        binding.value(event, el);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(el) {
    document.body.removeEventListener('click', el.clickOutsideEvent);
  }
};