問題描述：

一個Icon點擊出現選單，點選選單區域外任何區域選單收起。
何為優雅的去解決上述問題？

• 儘可能的採用vue來解決問題
• 儘可能少的與原生物件發生互動
• 程式碼乾淨、易懂

問題解決思路：

• 通過Vue的v-show指令決定選單的顯示、隱藏。
• 通過Document的全域性點選事件判斷是否該收起
• 需要優雅的解決幾個問題：
• 禁止點選事件冒泡。採用VUE的@click.stop來解決問題，請參考下方程式碼
• 優雅且安全的移除全域性事件監聽（只有選單彈出的時候才去監聽）

document的事件新增

HTML

<template>
 <div class="dir">
  <!-- 按鈕，特別注意@click.stop用於禁止訊息冒泡 -->
  <span title="排序" id="sort_by" @click.stop="onSortClick()" class="icons">按鈕</span><br/>
  <!-- 選單 v-show設定變數 showSortmenu，style的內容要一開始就寫上！
 此處不確定是否是個BUG，不初始style時顯示不正確
 -->
  <ul class="menu" id="sort_by_menu" v-show="showSortmenu" style="display: block;">
   <li sort="title">
    <span>標題</span>
   </li>
   <li sort="lastModify">
    <span>最後修改時間</span>
   </li>
   <li sort="free">
    <span>自定義排序</span>
   </li>
  </ul>
 </div>
</template>

JavaScript

<script>
export default {
 name: "demo2",data() {
  return {
   showSortmenu: false
  };
 },props: {},methods: {
  //接收按鈕點選事件@click.stop，禁止冒泡
  onSortClick: function() {
   //設定bool值， 
   this.showSortmenu = !this.showSortmenu;
   //要特別注意這裡，只有選單顯示的時候才會監聽全域性點選事件
   //並且，要設定為：vue的方法，不能扔到export程式碼段外面去。
   //要切記`this`這個變數對應的例項是誰
   if (this.showSortmenu) {
    document.addEventListener("click",this.onGlobalClick);
   }
  },//全域性監聽點選事件
  onGlobalClick(e) {
   //判斷全域性被點中的控制元件的className，不同就是選單外點選
   if (e.target.className != "sort_by_menu") {
    this.showSortmenu = false;
    //這裡要注意啊!!!!一定要記得移除監聽事件！！！！！
    document.removeEventListener("click",this.onGlobalClick);
   }
  }
 },mounted() {},};
</script>

總結

以上所述是小編給大家介紹的Vue 實現顯示/隱藏層的思路（加全域性點選事件），希望對大家有所幫助！