Vue点击其他地方隐藏DIV|极客教程

Vue点击其他地方隐藏DIV

在Vue中，经常会遇到需要隐藏某个元素或者执行某个操作的时候。特别是点击其他地方隐藏某个DIV的需求，在实际开发中很常见。

本文将详解如何在Vue中实现点击其他地方隐藏DIV的功能，并给出相应的示例代码。

实现思路

要实现点击其他地方隐藏DIV的功能，我们可以利用Vue的指令和事件机制。

具体的实现思路如下：

给需要隐藏的DIV添加一个指令，用来监听点击事件。
在指令的绑定函数中，判断点击事件的目标元素是否包含在需要隐藏的DIV内部。
如果点击事件的目标元素不在需隐藏DIV内部，则隐藏该DIV。

示例代码

下面是一个简单示例，演示了如何利用Vue实现点击其他地方隐藏DIV的功能：

<template>
  <div class="container">
    <div class="toggle-button" v-clickoutside="hideDiv">点击隐藏/显示</div>
    <div class="content" v-if="showDiv">
      这是需要隐藏的DIV内容。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDiv: false,
    };
  },
  directives: {
    clickoutside: {
      bind(el, binding, vnode) {
        el.clickOutsideEvent = function (event) {
          // 判断点击事件的目标元素是否在需要隐藏的DIV内部
          if (!(el === event.target || el.contains(event.target))) {
            // 隐藏需要隐藏的DIV
            vnode.context[binding.expression] = false;
          }
        };
        document.body.addEventListener("click", el.clickOutsideEvent);
      },
      unbind(el) {
        document.body.removeEventListener("click", el.clickOutsideEvent);
      },
    },
  },
  methods: {
    hideDiv() {
      this.showDiv = !this.showDiv;
    },
  },
};
</script>

<style scoped>
.container {
  width: 200px;
  height: 200px;
  position: relative;
}
.toggle-button {
  width: 100px;
  height: 40px;
  background-color: gray;
  color: white;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.content {
  position: absolute;
  top: 40px;
  width: 100%;
  background-color: lightgray;
  padding: 10px;
}
</style>

在上述示例代码中，我们定义了一个容器，其中包含了一个用来切换显示状态的按钮和一个需要隐藏的DIV。

我们定义了一个指令v-clickoutside，并在指令的绑定函数中添加了一个click事件监听器。当点击事件在需要隐藏的DIV之外时，我们通过vnode.context[binding.expression]将showDiv设置为false，从而实现隐藏DIV的效果。

另外，在组件的methods中，我们定义了hideDiv方法，用来切换需要隐藏的DIV的显示状态。