@kroha3000

Как сделать скрытие блока, при клике на любую область?

Есть Div. Открывается по клике на ссылку. Базовый пример.

Кликаем сюда: (клик - открыли, клик - закрыли)
<a @click="isActive = !isActive">Ссылка</a>

Открываем этот div:
<div :class="{active: isActive}"></div>

data() {
     isActive : false
  }


Вопрос: Как сделать так, чтобы закрытие было при клике на любую область экрана, кроме собственно div. То есть не на ссылку, а на любую область. И только закрытие.

Открыли Div по ссылки - закрываем div по клику на любое место.
  • Вопрос задан
  • 262 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
data: () => ({
  active: false,
}),
created() {
  const onClick = e => this.active = this.$refs.block.contains(e.target) && this.active;
  document.addEventListener('click', onClick);
  this.$on('hook:beforeDestroy', () => document.removeEventListener('click', onClick));
},

<button @click.stop="active = !active">click me</button>
<div :class="{ active }" ref="block">hello, world!!</div>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы