Vue实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）-创新互联

在项目中往往会有这样的需求： 弹出框（或Popover）在 show 后，点击空白处可以将其 hide。

创新互联建站长期为成百上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为瓜州企业提供专业的成都网站制作、成都做网站，瓜州网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

针对此需求，整理了三种实现方式，大家按实际情况选择。

当然，我们做项目肯定会用到 UI 框架，常见的 Element 中的组件提供了这样的方法。

但是，就算使用框架，有些时候还是要用到的，比如：

Element 中的 Popover，当我们想使用手动方式(trigger 触发方式为 manual时)控制它的 show & hide 的时候，就要自己实现这个功能啦。

第一种方式：最普通的手动监听判断

  
   
啦啦啦
   show
  

名称栏目：Vue实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）-创新互联
标题网址：http://cdkjz.cn/article/ceodgh.html