使用 vue.js 在 Tailwind ui 导航栏组件中修复下拉自动打开

Question

我使用了 Tailwind ui 中的导航栏组件。它看起来像这样：

<!-- Profile dropdown -->
<div class="ml-3 relative">
  <div>
    <button
      class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-white transition duration-150 ease-in-out"
      id="user-menu"
      aria-label="User menu"
      aria-haspopup="true"
    >
      <img
        class="h-8 w-8 rounded-full"
        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        alt
      />
    </button>
  </div>
  <!--
  Profile dropdown panel, show/hide based on dropdown state.

  Entering: "transition ease-out duration-100"
    From: "transform opacity-0 scale-95"
    To: "transform opacity-100 scale-100"
  Leaving: "transition ease-in duration-75"
    From: "transform opacity-100 scale-100"
    To: "transform opacity-0 scale-95"
  -->
  <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
    <div
      class="py-1 rounded-md bg-white shadow-xs"
      role="menu"
      aria-orientation="vertical"
      aria-labelledby="user-menu"
    >
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Your Profile</a>
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Settings</a>
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Sign out</a>
    </div>
  </div>
</div>

在这种情况下，当我在 vue.js 中运行此代码时，导航栏下拉菜单状态默认为打开。如何设置默认关闭状态？

这里是预览：

Answer 1

我不确定现在是否有人在关注这个问题，但我正在分享我的解决方案。在下拉代码的片段中有一条评论说：

            <!--
            Profile dropdown panel, show/hide based on dropdown state.

            Entering: "transition ease-out duration-100"
              From: "transform opacity-0 scale-95"
              To: "transform opacity-100 scale-100"
            Leaving: "transition ease-in duration-75"
              From: "transform opacity-100 scale-100"
              To: "transform opacity-0 scale-95"
          -->

它基本上告诉下拉的状态是根据类名改变的，所以你必须像这样使它们动态：

<div :class="`origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg transition ease-${dropdown ? 'out' : 'in'} duration-${dropdown ? '100' : '75'} transform opacity-${dropdown ? '100' : '0'} scale-${dropdown ? '100' : '95'}`">

现在这些类将取决于下拉值，它只是您组件的一个属性，可以通过这样的单击事件进行更改：

export default {
  name: 'TheNavBar',
  data() {
    return {
      dropdown: false,
    }
  },
}

<div>
  <button
    id="user-menu"
    class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-white transition duration-150 ease-in-out"
    aria-label="User menu"
    aria-haspopup="true"
    @click="dropdown = !dropdown"
  >
  </button>
</div>

Answer 2

我正在alpinejs使用 CDN 并包含它。当我将以下内容放入包装整个组件的 div 中时，它对我有用：

x-data="{ open: false }"

下面进入（用户个人资料图像）按钮 div

@click="open = true"

最后，这进入了下拉 div

x-show="open" @click.away="open = false"

Answer 3

我正在使用完全相同的组件并来这里寻找答案:(

由于没有人回答这个问题，这就是我一直在的地方： 明确表示您需要将 Javascript 与某些 Tailwind UI 组件一起使用，如下所示。

但我没有使用 JS，只有 CSS 技巧和稍微不同的标记和更简单的动画（但仍然很流畅！你可以看到这个答案底部的小提琴）。

标记：我刚刚删除了div头像按钮周围的包装以受益于~CSS 选择器，并且添加了一个 id #user-menu-dropdown：

<!-- Profile dropdown -->
<div class="ml-3 relative">
  <button
        class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-white transition duration-150 ease-in-out"
        id="user-menu" aria-label="User menu" aria-haspopup="true">
      <img class="h-8 w-8 rounded-full"
             src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
             alt=""/>
  </button>
  <div id="user-menu-dropdown" class="menu-hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
    <div
      class="py-1 rounded-md bg-white shadow-xs"
      role="menu"
      aria-orientation="vertical"
      aria-labelledby="user-menu"
    >
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Your Profile</a>
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Settings</a>
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Sign out</a>
    </div>
  </div>
</div>

这是我的 LESS

#user-menu ~ #user-menu-dropdown
    @apply transform

    @apply ease-in duration-75 opacity-0 scale-0

#user-menu ~ #user-menu-dropdown:focus-within, #user-menu:focus ~ #user-menu-dropdown
    @apply ease-out duration-100 opacity-100 scale-100

这是使用生成的 CSS 的结果

希望它能帮助你