Tailwind 和 Vue-Router - 单击菜单项时下拉菜单不会关闭

Posted 2023-03-07

【中文标题】Tailwind 和 Vue-Router - 单击菜单项时下拉菜单不会关闭

【英文标题】：Tailwind & Vue-Router - dropdown menu doesn't close when clicking on menu items

【发布时间】：2020-12-08 13:06:58

【问题描述】：

我在 tailwind & vue-router https://codepen.io/huphtur/pen/ordMeN 中使用以下下拉菜单。 我需要在下拉菜单中使用<router-link to="/">，但我发现这样做，一旦您单击菜单链接，下拉菜单就不会按应有的方式关闭。使用普通的<a> 元素，下拉菜单会正常关闭。

这是代码：

下拉元素组合

<div v-if="isOpen == false" class="dropdown inline-block relative sm:ml-20">
          <button class="text-gray-700 font-normal py-2 px-4 rounded inline-flex items-center">
            <span class="mr-1 cursor-default">Vita</span>
          </button>
          <ul class="w-32 dropdown-menu absolute hidden text-gray-700 pt-1 shadow-lg z-10">
            <li > <router-link to="/biografia"> <a class="rounded-t bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Bio </a> </router-link> </li>
            <li > <router-link to="/tour"> <a class="bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Tour </a> </router-link> </li>
            <li > <router-link to="/foto"> <a class="bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Foto </a> </router-link> </li>
            <li > <router-link to="/video"> <a class="rounded-b bg-white  hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Video </a> </router-link> </li>
          </ul>
        </div>

comp中的css样式

.dropdown:hover .dropdown-menu 
  display: block;
 

如何使用<router-link to="/"> 实现此功能？

谢谢！

【问题讨论】：

RouterLink 在其位置生成一个 元素。无需在里面嵌套另一个链接。只需将顺风类应用到 RouterLink 组件。

好的，这是一个很好的建议，但它仍然不能正常工作。

您能否发布更多代码，特别是在您定义<router-view></router-view> 的位置？更有帮助的是 jsfiddle 或类似网站上的工作示例。

【参考方案1】：

router-link 为您公开一个插槽以启用自定义。当router-link 处于活动状态时，我过去曾使用此方法将样式应用于外部li 元素，但您也可以使用相同的方法关闭下拉列表。

  <router-link
    to="/"
    v-slot=" href, route, navigate, isActive, isExactActive "
  >
    <a
      :href="href"
      @click="isOpen = false; navigate($event)"
    >
      Homepage
    </a>
  </router-link>

Source