vue2点击div以外的地方隐藏

在 Vue2 中，可以通过监听全局点击事件，判断点击的元素是否在需要隐藏的范围内来实现点击 div 以外的地方隐藏。具体实现可以参考以下代码：

<template>
  <div class="container" ref="container">
    <div class="box" v-show="showBox">这是需要隐藏的元素</div>
    <div class="button" @click="showBox = !showBox">点击这里显示/隐藏元素</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBox: false,
    };
  },
  mounted() {
    document.addEventListener("click", this.hideBox);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.hideBox);
  },
  methods: {
    hideBox(event) {
      if (!this.$refs.container.contains(event.target)) {
        this.showBox = false;
      }
    },
  },
};
</script>

在上述代码中，我们通过 `v-show` 控制需要隐藏的元素的显示与隐藏；通过监听 `mounted` 和 `beforeDestroy` 钩子函数，在组件挂载和销毁时分别添加和移除全局点击事件的监听；在 `hideBox` 方法中判断点击的元素是否在 `container` 容器内，如果不在则隐藏需要隐藏的元素。