时间戳

首页 > 解决方案 > 为什么升级到 Alpinejs 3.2 菜单不起作用？

alpine.js - 为什么升级到 Alpinejs 3.2 菜单不起作用？

问题描述

在 Laravel 8 / Alpinejs 2.8 应用程序中，我有类似的切换菜单

<!--Toggle button (hidden on large screens)-->
<button
    @click="isOpen = !isOpen"
    type="button"
    class="block lg:hidden px-2 text-gray-500 hover:text-white focus:outline-none focus:text-white"
    :class="{ 'transition transform-180': isOpen }"
>
    <svg
        class="h-6 w-6 fill-current"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
    >
        <path
            x-show="isOpen"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
        />
        <path
            x-show="!isOpen"
            fill-rule="evenodd"
            d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
        />
    </svg>
</button>

<!--Menu-->
<div
    class="w-full flex-grow lg:flex lg:items-center lg:w-auto"
    :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }"
    @click.away="isOpen = false"
    x-show.transition="true"
>
    <ul
        class="pt-6 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center"
    >
        <li class="mr-3">

它工作正常。升级到 Alpinejs 3.2 修改

@click.away="isOpen = false"

与 @click.away="isOpen = false" 与

@click.outside="isOpen = false"

和

x-show.transition="true"

进入

x-show="true"
x-transition

但在那之后，下拉菜单根本不可见。

为什么会这样以及如何解决？

修改#1：

  1. 如果要更改菜单的 x-show="isOpen" 则可以，在小型设备上菜单按预期工作，但在大型设备上它根本不可见

  2. 我需要以某种方式在大型设备上将 init 值设置为 true。健康）状况 ：

       x-show="isOpen"
   md:x-show="true"
   x-transition

不工作

  1. 我想我可以使用包https://github.com/jenssegers/agent根据当前设备获取此值。有更好的决定吗？

  2. 你能解释一下 devtools 在这个调试中是如何有用的吗？

谢谢！

标签： alpine.js

解决方案

isOpen如果您在 devtools 中检查它，当您切换状态时，它实际上会按预期工作。问题是当您单击按钮时，它也被视为click.away菜单外。我建议在父元素上设置此点击。我还更改了菜单设置 - x-show 设置为isOpen喜欢和切换语句将使用 Tailwind 的类x-show="isOpen"处理元素的可见性visible

<div
   x-data="{ isOpen: false }"
   @click.outside="isOpen = false"
>
    <button
          @click="isOpen = !isOpen"
          type="button"
          class="block lg:hidden px-2 text-gray-500 focus:outline-none"
          :class="{ 'transition transform-180': isOpen }"
      >
        <svg
          class="w-6 h-6 fill-current"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
        <path
          x-show="isOpen"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
         />
         <path
           x-show="!isOpen"
           fill-rule="evenodd"
           d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
         />
      </svg>
   </button>

   <!--Menu-->
   <div
       class="flex-grow w-full lg:flex shadow-3xl lg:items-center lg:w-auto"
       :class="[ isOpen ? 'visible' : 'unvisible' ]"
       x-show="isOpen"
       x-transition
    >
    <ul
     class="items-center justify-end flex-1 pt-6 lg:pt-0 list-reset lg:flex"
    >
      <li class="mr-3"><a href="#">Link 1</a></li>
      <li class="mr-3"><a href="#">Link 2</a></li>
    </ul>
  </div>
</div>

推荐阅读