Vue點擊其他地方隱藏DIV

Vue框架為我們提供了便捷的開發方式，能夠快速實現各種功能。在項目中，經常會遇到需要點擊其他地方來隱藏DIV的情況。本文將從多個方面分析Vue如何實現點擊其他地方隱藏DIV的功能。

一、Vue點擊其他地方隱藏

一個常見的需求是，在頁面上點擊除了某個元素以外的區域，隱藏這個元素。

下面是Vue實現點擊其他地方隱藏一個指定元素的方法：

<template>
  <div class="container" ref="box">
    <button @click="toggle">顯示/隱藏</button>
    <div class="box" v-if="isShow">
      我是要隱藏的元素
    </div>
  </div>
</template>

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

這段代碼中，我們在容器上利用ref屬性指定了一個名字，然後在關閉方法close中使用了contains方法，判斷當前點擊的元素是否在容器內，如果不在，那就隱藏這個元素。

二、Vue點擊其他地方隱藏組件

在Vue中，我們也可以利用組件來實現點擊其他地方隱藏的功能。同樣的，我們給出了一個示例代碼：

<template>
  <div class="container">
    <button @click="toggle">顯示/隱藏</button>
    <MyBox v-if="isShow" @close="close" />
  </div>
</template>

<template name="MyBox">
  <div class="box">
    我是要隱藏的元素
  </div>
</template>

<script>
const MyBox = {
  name: "MyBox",
  template: "#MyBox",
  methods: {
    close(target) {
      if (!this.$el.contains(target)) {
        this.$emit("close");
      }
    }
  }
};

export default {
  components: { MyBox },
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    },
    close() {
      this.isShow = false;
    }
  }
};
</script>

這裡，我們用了一個MyBox組件來實現需要隱藏的元素，給它的模板取了一個名字，然後定義了一個close方法，當點擊的元素不在此組件內時，觸發emit，通知父組件關閉元素。在父組件中，我們通過在模板中引入MyBox組件，並傳入close方法，實現了點擊按鈕顯示/隱藏MyBox組件。

三、Vue點擊其他地方隱藏彈窗

彈窗是Web開發中常用的元素，常常需要點擊其他地方來關閉它。下面的代碼演示了如何實現在Vue應用中點擊其他地方隱藏彈窗。

<template>
  <div class="container">
    <button @click="toggle">打開彈窗</button>
    <div class="mask" v-if="isShow">
      <div class="modal">
        <div class="close" @click="hide">X</div>
        彈出內容
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    toggle() {
      this.isShow = true;
    },
    hide(target) {
      if (this.$el.contains(target)) return;
      this.isShow = false;
    }
  },
  mounted() {
    document.addEventListener("click", this.hide);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.hide);
  }
};
</script>

這段代碼中，我們在模板中設置了一個遮罩層，給它的樣式設置了透明度，然後在點擊按鈕後，顯示遮罩層和彈出層。在關閉方法中，我們用了一個contains方法，如果被點擊的元素包含在當前組件內，就不關閉彈窗。

四、Vue點擊其他位置隱藏元素

除了點擊某個元素以外的區域來隱藏元素，還有一種情況是需要點擊其他位置來隱藏元素。比如下面的代碼：

<template>
  <div class="container">
    <div class="box" :class="{ active: isShow }">
      我是要隱藏的元素
    </div>
    <button @click="toggle">切換顯示/隱藏</button>
    <div class="other">
      這是其他地方
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    };
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    },
    handleClick(target) {
      if (!this.$el.contains(target)) {
        this.isShow = false;
      }
    }
  },
  mounted() {
    document.addEventListener("click", this.handleClick);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.handleClick);
  }
};
</script>

這裡，我們定義了一個box元素，它有一個active類，用來控制它的顯示與隱藏。當點擊切換按鈕時，會改變isShow的狀態，使box元素顯示/隱藏。我們還在模板中添加了一個其他部分，點擊這個部分就可以隱藏box元素。

五、Vue實現點擊顯示和隱藏

Vue提供了一個簡便的指令v-show，可以讓我們輕鬆實現點擊顯示和隱藏。下面是代碼示例：

<template>
  <div class="container">
    <button @click="isShow = !isShow">切換顯示/隱藏</button>
    <div class="box" v-show="isShow">
      我是要隱藏的元素
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    };
  }
};
</script>

這個代碼非常簡單，我們在box元素上使用了v-show指令，根據isShow的值來控制元素的顯示和隱藏。當點擊切換按鈕時，會改變isShow的狀態，從而達到了點擊顯示和隱藏的目的。

六、Vue點擊按鈕顯示隱藏

除了點擊其他地方隱藏元素，還可以使用按鈕來控制元素的顯示和隱藏。下面是代碼示例：

<template>
  <div class="container">
    <button @click="isShow = !isShow">切換顯示/隱藏</button>
    <div class="box" :class="{ active: isShow }">
      我是要隱藏的元素
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    };
  }
};
</script>

這段代碼與上面的示例類似，我們在box元素上添加了一個active類，用來控制元素的顯示和隱藏。當點擊按鈕時，會改變isShow的狀態，從而達到顯示和隱藏元素的效果。

七、Vue點擊切換顯示隱藏

有時候，我們需要點擊一個元素時，顯示另一個元素，再點擊它時，隱藏另一個元素。下面的代碼實現了這個效果：

<template>
  <div class="container">
    <div class="box1" :class="{ active: isShow }" @click="toggle">
      我是一個元素
    </div>
    <div class="box2" v-show="!isShow">
      我是另一個元素
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    };
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    }
  }
};
</script>

這段代碼中，我們定義了兩個box元素，分別是box1和box2，通過綁定class和v-show來實現它們之間的相互切換。當點擊box1元素時，切換isShow的狀態，從而隱藏box1並顯示box2；再次點擊box2，切換isShow狀態，達到切換顯示和隱藏的效果。

總結

以上就是七種Vue實現點擊其他地方隱藏DIV的方法，我們從各個方面分析了如何實現這個功能，希望對您有所幫助！