vue实现导航栏下拉菜单

这篇文章主要为大家详细介绍了vue实现导航栏下拉菜单，带展开收缩动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现导航栏下拉菜单的具体代码，供大家参考，具体内容如下

先看效果：

下拉菜单铺满全屏

...
...

.nav {     position: relative; } .dropdown-content {     position: absolute;     width: 100%;  // 拉满 }

下拉动画

方法一：鼠标移入移出事件

使用的是vue的 transition组件以及鼠标事件@mouseenter 和 @mouseleave

.dropdown-enter-active {   animation: expand-contract 1s ease; } .dropdown-leave-active {   animation: expand-contract 1s ease reverse; } @keyframes expand-contract {   0% {     overflow: hidden;     opacity: 0;     max-height: 0;   }   100% {     max-height: 300px;  // 大于等于下拉菜单的高度     opacity: 1;   } }

优点：

1、结构层次清楚
2、多个导航需要下拉菜单，且结构相似内容不同，只需要重新渲染数据即可。

缺点：

1、使用了事件处理相对复杂

案例代码