vuejs에서 메뉴 외부를 클릭할 경우 드롭다운 메뉴를 숨기는 방법

vuejs에서 메뉴 외부를 클릭할 경우 드롭다운 메뉴를 숨기는 방법

사용하고 있다dropdown메뉴 컴포넌트를 vuejs로 설정하여 일반 드롭다운 메뉴를 만듭니다.내 암호는dropdown컴포넌트는 다음과 같습니다.

<template>
    <span class="dropdown" :class="{shown: state}">
        <a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a>
            <div class="dropdown-menu" v-show="state">
                <ul class="list-unstyled">
                    <slot></slot>
                </ul>
            </div>
        </transition>
    </span>
</template>

<script>
export default {
    name: 'dropdown',
    data () {
        return {
            state: false
        }
    },
    methods: {
        toggleDropdown (e) {
            this.state = !this.state;
        }
    }
}
</script>

지금 Import를 하고 있습니다.dropdown내 컴포넌트VUE템플릿 내의 다음 코드를 사용하여 다양한 장소에서 앱을 만듭니다.

<dropdown>
    <li>
         Action
    </li>
</dropdown>

이것으로 정상적으로 동작하고 있습니다만, 동시에 액티브한 드롭 다운은 1개뿐입니다.

https://github.com/davidnotplay/vue-my-dropdown과 같은 플러그인을 사용할 수 있다는 것을 알게 되었습니다만, 사용하고 싶지 않습니다.위의 예도 어떻게 동작하는지에 대해서도 공부했습니다만, 이 드롭다운 기능을 실장하고 싶다고 생각하고 있습니다.dropdown컴포넌트는 드롭다운과 관련된 모든 이벤트를 처리합니다.그래서 어떻게 그것을 달성할 수 있는지 도와줄 수 있나요?

오래된 질문인 것은 알지만 외부 플러그인이 없는 최선의 방법은 장착된 라이프 사이클 훅에 클릭 청취자를 추가하고(파괴 전 삭제) 컴포넌트를 클릭하여 외부에서 클릭했을 때만 컴포넌트가 숨도록 필터링하는 것이라고 생각합니다.

<template>
    <span class="dropdown" :class="{shown: state}">
      <a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a>
            <div class="dropdown-menu" v-show="state">
                <ul class="list-unstyled">
                    <slot></slot>
                </ul>
            </div>
        <transition/>
    </span>
</template>

<script>
export default {
  name: 'dropdown',
  data () {
    return {
      state: false
    }
  },
  methods: {
    toggleDropdown (e) {
      this.state = !this.state
    },
    close (e) {
      if (!this.$el.contains(e.target)) {
        this.state = false
      }
    }
  },
  mounted () {
    document.addEventListener('click', this.close)
  },
  beforeDestroy () {
    document.removeEventListener('click',this.close)
  }
}
</script>

vue-clickaway를 보세요.(링크)

경우에 따라서는 (모달 창을 닫거나 드롭다운 선택을 숨기기 위해) 요소 외부의 클릭을 감지해야 합니다.이를 위한 네이티브이벤트는 없으며 Vue.js도 대상이 되지 않습니다.이것이 vue-clickaway가 존재하는 이유입니다.자세한 내용을 읽기 전에 데모를 확인하십시오.

Vue 3에서는 다음 기능이 작동합니다.

주의:@click.stop드롭다운 트리거 및 드롭다운 콘텐츠에서 문서 이벤트가 닫힘 기능을 실행할 수 없도록 합니다.

<template>
  <div class="dropdown" :class="{'is-active': dropdown.active.value}">
    <div class="dropdown-trigger">
      <button class="button" @click.stop="dropdown.active.value = !dropdown.active.value">
        Toggle
      </button>
    </div>
    <div class="dropdown-menu" role="filter">
      <div class="dropdown-content" @click.stop>
        <!-- dropdown items -->
      </div>
    </div>
  </div>
</template>

<script>

import { defineComponent, ref, onMounted, onBeforeUnmount } from "vue";

export default defineComponent({
  name: "Dropdown",
  setup(){
    const dropdown = {
      active: ref(false),
      close: () => {
        dropdown.active.value = false
      }
    }

    onBeforeUnmount(() => {
      document.removeEventListener('click', dropdown.close)
    })

    onMounted(() => {
      document.addEventListener('click', dropdown.close)
    })

    return {
      dropdown
    }
  }
})

</script>

이 예에서는,bulma물론 그럴 필요는 없죠

를 사용할 수 있습니다.blur예를 들어 메서드를 추가하는 경우:

close() {
    setTimeout(() => {
        this.state = false;
    }, 200);
}

또,blur링크 이벤트:

<a href="#" @click.prevent="toggleDropdown" @blur="close">toggle menu</a>

그러면 토글링크가 포커스를 잃을 때마다 드롭다운이 숨겨집니다.그setTimeoutJavascript 클릭 이벤트는 블러 후에 발생하므로 드롭다운 링크를 클릭할 수 없습니다.이 문제를 해결하려면 메뉴를 숨김으로써 조금 늦춰야 합니다.

언급URL : https://stackoverflow.com/questions/46038989/how-to-hide-dropdown-menu-if-we-click-outside-the-menu-in-vuejs