详解Vue如何实现显示/隐藏层-创新互联

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

目前创新互联建站已为1000多家的企业提供了网站建设、域名、虚拟主机、网站托管、服务器租用、企业网站设计、寿县网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

问题描述：

一个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" >
   <li sort="title">
    <span>标题</span>
   </li>
   <li sort="lastModify">
    <span>最后修改时间</span>
   </li>
   <li sort="free">
    <span>自定义排序</span>
   </li>
  </ul>
 </div>
</template>

当前名称：详解Vue如何实现显示/隐藏层-创新互联
新闻来源：https://www.cdcxhl.com/article38/ddccsp.html

成都网站建设公司_创新互联，为您提供品牌网站建设、商城网站、面包屑导航、网站策划、网页设计公司、关键词优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联