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

Question

[kroha3000]

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

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

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

data() {
     isActive : false
  }

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

Открыли Div по ссылки - закрываем div по клику на любое место.

Answer 1

[0xD34F]

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>

Comments

[kroha3000]

Спасибо огромное!