javascript - 在没有包的vue中单击某些元素之外

Question

我想知道我们如何从 vue 中的这些元素中隐藏所有点击时显示的元素：

<button @click="div1=true">Show div 1</button>
<div v-if="div1">DIV 1</div>

<button @click="div2=true">Show div 2</button>
<div v-if="div2">DIV 2</div>

如果单击 div 1 或在单击页面的某个随机部分时隐藏所有 div，如何隐藏除 div 1 之外的所有 div？vuetify 是如何处理的？

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

Answer 1

Vue的方式是使用this.$el（当前组件的DOM元素），你可以改变this.$el和使用任何其他的HTMLElement

<div class="modal" @click="handleClick">
  <div class="modal-dialog">
    <div class="modal-content">
    ...
    </div>
</div>

方法应该是这样的

handleClick(e: Event): void {
  if (e.target instanceof HTMLElement && !this.$el.contains(e.target)) {
    this.$emit("hide"); //fires only on click outside
  }
}