Imitieren Sie el-select, um zu erkennen, dass durch Klicken auf die Schaltfläche das Dropdown-Feld angezeigt wird

Klicken Sie auf die Schaltfläche, um das Dropdown-Feld anzuzeigen, und klicken Sie auf den äußeren Teil des Dropdown-Felds, um es zu schließen (klicken Sie auf den Teil innerhalb des Dropdown-Felds, um es nicht zu schließen).

Realisierungseffekt:

Implementierungscode:

<template>
  <div style="position: relative;">
    <button ref="selectButton" @click="toggleDropdown">显示下拉框</button>
    <div v-if="isDropdownVisible" ref="dropdown" class="dropdown">
      <!-- 下拉框内容 -->
      <!-- ... -->
    </div>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      isDropdownVisible: false, // 下拉框的显示状态
    };
  },
  mounted() {
    
    
    // 监听点击事件，用于关闭下拉框
    window.addEventListener('click', this.handleClickOutside);
  },
  beforeUnmount() {
    
    
    // 移除点击事件监听器
    window.removeEventListener('click', this.handleClickOutside);
  },
  methods: {
    
    
    toggleDropdown() {
    
    
      this.isDropdownVisible = !this.isDropdownVisible; // 切换下拉框的显示状态
    },
    handleClickOutside(event) {
    
    
      // 判断点击事件的目标是否在下拉框内部或按钮内部，如果不在，则关闭下拉框
      if (this.$refs.dropdown 
          && !this.$refs.dropdown.contains(event.target) 
          && !this.$refs.selectButton.contains(event.target)) {
    
    
        this.isDropdownVisible = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
  
.dropdown {
    
    
  position: absolute;
  top: 100%; /* 下拉框相对于按钮的位置 */
  left: 0;
  width: 200px;
  background-color: #cc2424;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 9999;
}
</style>

Beachten Sie, dass sich der obige Implementierungseffekt geringfügig von diesem Implementierungscode unterscheidet, aber fast derselbe ist. Da der Implementierungseffekt für das eigentliche Projekt gilt und der darin enthaltene Code zu kompliziert ist, wird der grundlegendste Funktionscode geschrieben Hier.
Hinweis: Hier wird vue3 verwendet.

Im obigen Beispiel wird durch Hinzufügen eines Klickereignis-Listeners im bereitgestellten Lebenszyklus-Hook das Klickereignis des gesamten Fensters überwacht. Entfernen Sie den Ereignis-Listener im Lebenszyklus-Hook beforeUnmount, um zu vermeiden, dass er weiterhin auf Klickereignisse wartet, wenn die Komponente zerstört wird.

Bestimmen Sie in der Methode handleClickOutside, ob sich das Ziel des Klickereignisses innerhalb des DOM-Elements des Dropdown-Felds oder des DOM-Elements der Schaltfläche befindet. Wenn sich das Klickziel weder im Dropdown-Feld noch in der Schaltfläche selbst befindet, setzen Sie isDropdownVisible auf „false“, wodurch das Dropdown-Feld geschlossen wird.

Mit der oben beschriebenen Methode können Sie die Funktion zum Schließen des Dropdown-Felds realisieren, indem Sie auf eine andere Stelle als das Dropdown-Feld klicken.