Alpine.js 取决于屏幕大小的不同状态

Question

我需要 x-on:mouseenter="itemActive = {{ index }}" 和 x-on:mouseleave="itemActive = false" 状态在小于 768px 的屏幕上为 x-on:click="itemActive = {{ index }}" 和 x-on:click.away="itemActive = false"。下面的代码与大屏幕的悬停部分完美配合，但似乎无法弄清楚如何使其适用于不同的屏幕尺寸。

我正在使用 Twig、Tailwind 和 Alpine.JS。

<div x-data="{itemActive: false}" class="w-full pb-12 mt-5 overflow-x-hidden overflow-y-scroll md:flex md:flex-wrap md:w-auto md:mt-0 md:pb-0 md:overflow-visible">

  {% for item in menu.items %} {% set index = loop.index0 %}

  <div x-on:mouseenter="itemActive = {{ index }}" x-on:mouseleave="itemActive = false" class="flex flex-wrap w-full md:block md:w-auto {{ item.classes|join(' ') }}">

    <a :class="{'bg-gray-900' : itemActive === {{ index }}}" class="flex flex-wrap items-center justify-between w-full h-10 px-4 cursor-pointer md:h-14 md:justify-start md:w-auto" href="{{ item.link }}">
      {{ item.title }}      
      {% if item.children %}
        <span><i class="pl-2 fa fa-caret-down"></i></span>
      {% endif %}
    </a>

    {% if item.children %}
    <div x-show="itemActive === {{ index }}" class="absolute z-10 w-48 bg-gray-900">
      {% for child in item.children %}
      <a class="flex flex-wrap items-center h-12 px-4 transition-colors cursor-pointer md:h-14 hover:bg-gray-700" href="{{ child.link }}" >
        {{ child.title }}
      </a>
      {% endfor %}      
    </div> 
    {% endif %}

  </div>

  {% endfor %}
  
</div>

有什么建议吗？

Answer 1

我昨晚遇到了同样的问题，我使用了以下方法：

  <div
    x-data="{ open: false, timeout: null}"
    x-on:mouseenter="
    width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if (width > 640) {
      open = true; clearTimeout(timeout)
    }
    "
    x-on:mouseleave="
    width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if (width > 640) {
     timeout = setTimeout(() => { open = false }, 100)
    }
    "
    @resize.window="
    width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if (width > 640) {
     open = false
    }
    "
    class="flex flex-col items-start justify-start sm:items-center w-full sm:relative sm:w-3/12 font-bold"
  >
    <div
      @click="open = !open"
      x-bind:class="open ? 'border-black border-b sm:border-0' : ''"
      class=" p-2 sm:p-0 w-full text-left sm:text-center hover:text-primary-light"
    >
      ABOUT US
    </div>
    <div x-show="open" class="flex flex-col items-start sm:items-center bg-white sm:border sm:border-black sm:rounded-lg w-full static sm:absolute sm:shadow-xl mx-auto top-0 mt-0 sm:mt-6 font-light pb-2"> 
      <a href={Routes.page_path(Endpoint, :index)} class="pl-4 sm:pl-0 w-full text-left sm:text-center pt-2 pb-2 border-b sm:border-b-0 sm:rounded-t-lg hover:bg-gray-100">
        Our Mission
      </a>
      <a href={Routes.page_path(Endpoint, :index)} class="pl-4 sm:pl-0 w-full text-left sm:text-center pt-2 pb-2 border-b sm:border-b-0 hover:bg-gray-100">
        Our Team
      </a>
      <a href={Routes.page_path(Endpoint, :index)} class="pl-4 sm:pl-0 w-full text-left sm:text-center pt-2 pb-2 border-b sm:border-b-0 hover:bg-gray-100">
        Join Us
      </a>
      <a href={Routes.page_path(Endpoint, :index)} class="pl-4 sm:pl-0 w-full text-left sm:text-center pt-2 pb-2 border-b sm:border-b-0 sm:rounded-b-lg hover:bg-gray-100">
        Contact Us
      </a>
    </div>
  </div>

关键部分是x-on:mouseenter、x-on:mouseleave和@resize.window里面的代码。我们指定只有当宽度 > 640 时才触发该事件。@resize.windows 在您展开浏览器并到达断点时很重要，因此我们可以重新设置 open 变量，否则状态会被拖拽.

Alpine.js 取决于屏幕大小的不同状态

Different states depending on screen size with Alpine.js

javascript

toggle

hover

alpine.js