详解Vue如何实现显示/隐藏层

小编这次要给大家分享的是详解Vue如何实现显示/隐藏层,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

创新互联主要从事成都做网站、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务洛阳,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

问题描述:

一个Icon点击出现菜单,点击菜单区域外任何区域菜单收起。
何为优雅的去解决上述问题?

  • 尽可能的采用vue来解决问题
  • 尽可能少的与原生对象发生交互
  • 代码干净、易懂

问题解决思路:

  • 通过Vue的v-show指令决定菜单的显示、隐藏。
  • 通过Document的全局点击事件判断是否该收起
  • 需要优雅的解决几个问题:
  • 禁止点击事件冒泡。采用VUE的@click.stop来解决问题,请参考下方代码
  • 优雅且安全的移除全局事件监听(只有菜单弹出的时候才去监听)

document的事件添加

HTML

JavaScript

看完这篇关于详解Vue如何实现显示/隐藏层的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。


文章名称:详解Vue如何实现显示/隐藏层
转载源于:http://pwwzsj.com/article/jjsgee.html