vue（js）點擊目標div以外區域將目標div隱藏

今天開發新項目的時候，有個需求，點擊一個div 展示出個彈出窗 彈出窗標題的顏色要跟點擊的div圖標顏色一致，

所以這就需要我遍歷一下多個數據，

然后需要點擊彈出div的外部其他區域，隱藏這個div。所以 有了以下操作！

這個點擊事件@click.stop="isPop(item.event)" 加上.stop  起阻止冒泡的效果，這里很重要，具體原因就暫時不解釋了 。做的時候就會理解了；

目標div 是被 item.popShow 控制的，我給出我數組的格式

fiveList: [
            {
              img: "./images/case/blockchain/[e-mail]",
              popShow: false,
              color: "rgba(245, 134, 125, 1)",
              title: "區塊鏈錢包",
              content:
                "支持各類底層協議類錢包開發，如比特幣、以太坊等代幣開發和私有鏈的搭建，可完美對接會員系統和交易系統。"
            },
            {
              img: "./images/case/blockchain/[e-mail]",
              popShow: false,
              color: "#6cd286",
              title: "會員算力系統",
              content:
                "會員算力系統包括會員管理系統、會員獎勵制度、會員推薦制度，可對接商城系統，游戲等應用場景。"
            },
            {
              img: "./images/case/blockchain/[e-mail]",
              popShow: false,
              color: "#36b5f0",
              title: "數字幣交易系統",
              content:
                "分會員算力系統內置交易系統和獨立交易系統，點對點交易。會員算力系統y無縫對接。"
            },
            {
              img: "./images/case/blockchain/[e-mail]",
              popShow: false,
              color: "#ffa930",
              title: "大型交易所系統",
              content:
                "支持C2C交易、幣幣交易、OTC場外交易。內存運行，速度快，高效，穩定。"
            },
            {
              img: "./images/case/blockchain/[e-mail]",
              popShow: false,
              color: "#a676e4",
              title: "專業的開發團隊",
              content:
                "開發團隊精通區塊鏈數字幣等技術，精通各種會員獎金制度算法和各類交易系統的開發。"
            }
          ],

然后如果單純的需要控制這個div的顯示與隱藏的話，就一條代碼足矣

那么如何獲取這個div的其他外部區域呢？

 

 box 是彈出窗div的 id；

這樣就能在內和在外操作了；

眾所周知。 我們如果需要在這里面控制每個被點擊的div的話，直接 this.xxx=false; 是不行的  原因你們應該也懂；

列出關鍵代碼：

先var 一個 空數組；循環彈出層數組，拿到每個彈出層此時的 true or false 的狀態

這是我點擊第一個。所以就是 第一個 為true 其他都是 false了；

所以這里的邏輯就是，當這個div的狀態為true時，將這個為true的數組 push 進 popList 中；然后點擊 “在外” 那里將它隱藏就好了

因此就達到了想要的效果