Vue如何实现下拉菜单效果？

本文共计814个文字，预计阅读时间需要4分钟。

原文：本文字例为大家庭分享了vue实现下拉菜单效果的总体代码，供大家参考，具体内容如下：下拉菜单主要运用了hover显示与隐藏以及定位的问题+效果图：可能出现的問題+定位后菜单的div无法

以下为vue实现下拉菜单效果的代码示例，仅供参考。内容包含：下拉菜单的hover显示与隐藏及定位问题，并附效果图展示可能遇到的问题及定位后菜单div无法显示的情况。

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

下拉菜单主要运用了hover显示与隐藏以及定位的问题

效果图：

可能出现的问题

定位后菜单的div无法自适应（宽度由定位的父元素决定导致换行）

div {     white-space: nowrap;     width: auto; }

制作下拉菜单时，a标签列表根据最大的内容自适应宽度撑满盒子

a {     display: block;     width: 100%; }

CSS下拉菜单鼠标移入菜单内容时，菜单隐藏消失的问题

首先，我们用 css 写下拉菜单，一般过程是这样：一个大的父元素框架—— drop-list ，包含一个触发下拉菜单的起点—— drop-text，和一个菜单内容——drop-content，鼠标移动到父元素上时，下拉菜单显示，鼠标移开时，菜单内容隐藏。

按照道理来说，鼠标放置父元素整体范围是不会收起菜单内容的，经过排错后发现，drop-content与 drop-text 存在空隙，鼠标移动到那个缝隙时，就离开了父元素，所以会存在鼠标移动时，菜单内容收起的情况。

解决方法：

1、让空隙消失，设置 droptext 的下外边距为0即 margin-bottom:0; drop-content 的上外边距为0 即 margin-top:0。
2、若需要间隙可以在drop-content内包裹一层在里面设置间隙，把drop-content透明隐藏。

代码如下：

<template>   <div class="container">     <div class="dropdown">       <!-- 标题 -->       <span class="dropdown-title"> 下拉菜单 </span>       <!-- 下拉菜单内容 -->       <div class="dropdown-content">         <div class="dropdown-menu">           <div class="menuItem">菜单1</div>           <div class="menuItem">菜单菜单1</div>           <div class="menuItem">菜单2</div>           <div class="menuItem">菜单菜单菜单1</div>           <div class="menuItem">菜单3</div>         </div>       </div>     </div>   </div> </template> <script> export default {   data() {     return {};   },   mounted() {},   methods: {}, }; </script> <style lang="scss" scoped> .container {   padding: 20px; } .dropdown {   margin: 0 20px;   .dropdown-title {     display: inline-block;     position: relative;     height: 60px;     line-height: 60px;     font-size: 20px;     color: #fff;     background-color: #000;     padding: 0 24px;     border-radius: 4px;     cursor: pointer;     // transition: all 1s ease-in-out;   }   .dropdown-content {     // 定位显示局域     position: absolute;     visibility: hidden; // 隐藏     opacity: 0; // 隐藏     transition: all 0.6s ease-in-out;     .dropdown-menu {       margin-top: 4px;  // 与title制造距离       padding: 10px 8px 15px; // 给下面多留一点距离，抵消视觉差       color: white;       background-color: rgba($color: #000, $alpha: 0.8);       border-radius: 4px;       .menuItem {         width: 100%;  // 自适应宽度         white-space: nowrap;         padding: 10px 16px;         font-size: 16px;         color: white;         cursor: pointer;         border-radius: 4px;         &:hover {           background-color: #ccc;         }       }     }   }   &:hover .dropdown-content {     visibility: visible;     opacity: 1;   } } </style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。