在没有包的vue中单击某些元素之外答案

【问题标题】：On click outside of some element in vue without packages在没有包的vue中单击某些元素之外
【发布时间】：2019-07-19 07:52:26
【问题描述】：

我想知道如何从 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 是如何处理的？

【问题讨论】：

只需 detect the click outside with a directive 并遍历打开的 div 并将其 display/hide 属性设置为 false。
对我不起作用，即使它在小提琴中起作用我得到Cannot set property 'event' of undefined
你看我链接的具体答案了吗？不是为 vue 1.x 选择的问题答案。
@StevenB。是的，我做到了

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案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
  }
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

我的 Home 组件模板：

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

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

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

<nav id="nav">

当我使用 ref="nav" 时会引用它。

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

因此，在 Home 中使用该方法所需要做的就是使用：

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

【讨论】：

【解决方案4】：

使用div1 = !div1 切换视图，或者只使用一次div1 = true。

<template>
  <div>
    {{ div1 }}
    <button @click="div1 = !div1">Show div 1</button>
    <div v-if="div1">DIV 1</div>

    {{ div2 }}
    <button @click="div2 = !div2">Show div 2</button>
    <div v-if="div2">DIV 2</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      div1: true, // set default value as you want
      div2: false,
    };
  },
};
</script>

【讨论】：