Скрыть выпадающее меню на клик VueJS

Question

У меня есть выпадающее меню, которое имеет position: absolute; Мне это нужно, когда пользователь щелкает прочь от выпадающего меню, он будет закрыт.

У меня просто есть атрибут данных showDropdown, который является либо истинным, либо ложным. Нажатие на кнопку: @click="showDropdown = !showDropdown", которая работает отлично.

Я использую mixax vue-clickaway, но не могу понять, как скрыть его только тогда, когда он открыт.

Большое спасибо!

Answer 1

Это на самом деле больше вопрос CSS, чем вопрос Вью, но вы можете в основном сделать следующее:

// component 
<div class="dropdown" :class="{ 'is-open': showDropdown }"> 
    // elements 
    <button @click="showDropdown = !showDropdown">Close Dropdown</button> 
</div> 

// css 
.dropdown { 
    position: absolute; 
    display: none; 
    // other styles 
} 

.dropdown.is-open { 
    display: block; 
} 

Эта линия: :class="{ 'is-open': showDropdown }" применяет is-open класс всякий раз, когда showDropdown === true. Свойства display в основном показывают/скрывают меню, присутствует ли класс is-open или нет. Вы можете изменить эти стили, чтобы создать более стильную анимацию с использованием css-переходов, но это общая предпосылка.

Answer 2

Использование VUE-clickaway я использовал код ниже:

dropdownClickAway(e) { 
    if(this.showDropdown && e.target != this.$refs.dropdownButton) this.showDropdown = false; 
} 

Answer 3

Вы должны к способам переключения выпадающего меню.

Один для переключения выпадающего списка.

toggleDropdown() { 
    this.showDropdown = ! this.showDropdown 
} 

И один для скрытия выпадающего списка.

hideDropdown() { 
    this.showDropdown = false 
} 

И использовать его связывания событий (для @click и v-on-clickaway) как так:

<button class="dropdown-toggle" @click="toggleDropdown"> . . . </button> 
// And 
<div class="dropdown" v-show="showDropdown" v-on-clickaway="hideDropdown"> . . . </div>