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 1之外的所有div，或者单击页面的某个随机部分，如何隐藏所有div？ vuetify如何处理它？</ p>

Answer 1

如果您知道事件冒泡在DOM中的工作原理，很容易检测到元素外部的点击。
将每个div的状态置于组件状态时，隐藏其他div效果很好。

这里是一个示例：https://codesandbox.io/s/0480m38mww?fontsize=14&module=%2Fsrc%2FApp.vue

在此处了解有关事件冒泡的更多信息-https://javascript.info/bubbling-and-capturing

Answer 2

正确的方法是使用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
  }
}

Answer 3

我使用了这个过程，所以 Home 组件会知道我的 Nav 组件外部已被点击。在我的 Home 组件中有我的导航很有帮助。

我的主页组件模板：

<div>
 <nav-bar ref="nav"></nav-bar>
  <div @click="useHideNavMethod()">

所以我使用 ref="nav" 在我的 Home 组件中使用来自 Nav 的方法。这意味着我可以使用 hideNav() 方法（位于 Nav 中）。我故意用 click 方法将导航放在这个 div 之外，所以除了导航以外的任何地方点击都会启动 useHideNavMethod() 函数。

在我的导航组件模板中，我有：

<nav id="nav">

当我使用 ref="nav" 时被引用。

所以在我的 hideNav() 里面我有 this.styleNavLi.display = 'none'; 所以它会隐藏导航栏。

所以我需要做的就是在 Home 中使用该方法：

useHideNavMethod() {
 this.$refs.nav.hideNav();
}

在不包含包的vue中某些元素之外单击时

3 个答案:

这里是一个示例：https://codesandbox.io/s/0480m38mww?fontsize=14&module=%2Fsrc%2FApp.vue