vue（js）点击目标div以外区域将目标div隐藏

今天开发新项目的时候，有个需求，点击一个div 展示出个弹出窗弹出窗标题的颜色要跟点击的div图标颜色一致，

所以这就需要我遍历一下多个数据，

然后需要点击弹出div的外部其他区域，隐藏这个div。所以有了以下操作！

这个点击事件@click.stop="isPop(item.event)" 加上.stop 起阻止冒泡的效果，这里很重要，具体原因就暂时不解释了。做的时候就会理解了；

目标div 是被 item.popShow 控制的，我给出我数组的格式

fiveList: [
            {
              img: "./images/case/blockchain/1@2x.png",
              popShow: false,
              color: "rgba(245, 134, 125, 1)",
              title: "区块链钱包",
              content:
                "支持各类底层协议类钱包开发，如比特币、以太坊等代币开发和私有链的搭建，可完美对接会员系统和交易系统。"
            },
            {
              img: "./images/case/blockchain/2@2x.png",
              popShow: false,
              color: "#6cd286",
              title: "会员算力系统",
              content:
                "会员算力系统包括会员管理系统、会员奖励制度、会员推荐制度，可对接商城系统，游戏等应用场景。"
            },
            {
              img: "./images/case/blockchain/3@2x.png",
              popShow: false,
              color: "#36b5f0",
              title: "数字币交易系统",
              content:
                "分会员算力系统内置交易系统和独立交易系统，点对点交易。会员算力系统y无缝对接。"
            },
            {
              img: "./images/case/blockchain/4@2x.png",
              popShow: false,
              color: "#ffa930",
              title: "大型交易所系统",
              content:
                "支持C2C交易、币币交易、OTC场外交易。内存运行，速度快，高效，稳定。"
            },
            {
              img: "./images/case/blockchain/5@2x.png",
              popShow: false,
              color: "#a676e4",
              title: "专业的开发团队",
              content:
                "开发团队精通区块链数字币等技术，精通各种会员奖金制度算法和各类交易系统的开发。"
            }
          ],