Tailwindcss 下拉项目飞到屏幕边缘而不是下拉按钮下方

Posted 2023-02-22

【中文标题】Tailwindcss 下拉项目飞到屏幕边缘而不是下拉按钮下方

【英文标题】：Tailwindcss Dropdown item flying off to edge of the screen instead of under the dropdown button

【发布时间】：2020-03-02 13:07:06

【问题描述】：

所以我用 Rails、Vue 和 TailwindCss 1.0+ 制作了一个应用程序

目前我正在尝试为我的产品创建一个下拉菜单，但是当我单击下拉按钮时，包含我的项目的下拉菜单会飞到屏幕边缘，而它应该在我的按钮下方。

我不太确定我哪里出错了。

问题图片：

下拉菜单的外观如下：

<!-- Start LG Products Dropdown -->
  <div class="hidden lg:inline-block">
    <button @click="prodOpen = !prodOpen" role="button" class="relative z-10 inline-block select-none focus:outline-none text-base font-normal text-blue-600 hover:text-green-600 header-font focus:text-green-600">
      <i class="fal fa-sitemap"></i><span class="ml-1">Products</span>
    </button>
    <button v-if="prodOpen" @click="prodOpen = false" class="fixed inset-0 bg-black opacity-25 h-full w-full cursor-default"></button>
  </div>
  <div v-if="prodOpen" class="absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
    <slot name="dropdown-items"></slot>
  </div>
<!-- End LG Products Dropdown -->

这是整个nav组件的代码：

<template>
  <nav class="flex items-center justify-between flex-wrap bg-white p-6 w-full fixed">
    <a href="https://loadze.com">
      <h1>
        <div class="flex items-center flex-shrink-0 text-blue-600 mr-6 logoFont">
          <span class="font-bold text-3xl tracking-tight"><i class="far fa-truck-loading text-2xl"></i>LOADZE</span>
        </div>
      </h1>
    </a>

    <div class="block lg:hidden">
      <button @click="navOpen = !navOpen" class="flex items-center px-3 py-2 border rounded text-blue-600 border-blue-600 hover:text-green-600 hover:border-green-600 focus:outline-none">
        <svg v-if="!navOpen" aria-hidden="true" focusable="false" data-prefix="far" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg>
        <svg v-if="navOpen" aria-hidden="true" focusable="false" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>
      </button>
    </div>

    <div :class="navOpen ? 'block' : 'hidden'" class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
      <div class="text-sm lg:flex-grow">
        <slot name="nav-left"></slot>

        <!-- Start LG Products Dropdown -->
          <div class="hidden lg:inline-block">
            <button @click="prodOpen = !prodOpen" role="button" class="relative z-10 inline-block select-none focus:outline-none text-base font-normal text-blue-600 hover:text-green-600 header-font focus:text-green-600">
              <i class="fal fa-sitemap"></i><span class="ml-1">Products</span>
            </button>
            <button v-if="prodOpen" @click="prodOpen = false" class="fixed inset-0 bg-black opacity-25 h-full w-full cursor-default"></button>
          </div>
          <div v-if="prodOpen" class="absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
            <slot name="dropdown-items"></slot>
          </div>
        <!-- End LG Products Dropdown -->
      </div>
      <div>
        <slot name="nav-right"></slot>
      </div>
    </div>
  </nav>
</template>

<script>
export default 
  data () 
    return 
      navOpen: false,
      prodOpen: false
    
  

</script>

【问题讨论】：

也许是你的相对类只给按钮似乎不起作用。尝试将其包装在一个 div 中并为该 div 赋予相关类。

这里是一个例子codepen.io/Shuree/pen/GRRxdVV

Adam 有关于“构建下拉菜单”tailwindcss.com/course/styling-the-basic-dropdown-elements

的视频教程系列

@Saleem 代码来自该课程......

您可以将 relative 类添加到 div 的父级（您可以在其中检查 v-if="prodOpen"）

【参考方案1】：

我没有完全理解您的问题。但是，如果我看到屏幕截图，我猜这是您所说的对齐方式。基于这个结论。

如果是这种情况，您必须更改以下内容：left-0 到 right-0。

<div v-if="prodOpen" class="absolute left-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
    <slot name="dropdown-items"></slot>
</div>

收件人：

<div v-if="prodOpen" class="absolute right-0 mt-5 bg-white rounded-lg shadow-xl w-40 headerFont text-base font-normal">
    <slot name="dropdown-items"></slot>
</div>

这将使 div 从右到左对齐，如果它扩展/需要更多空间，它将扩展到屏幕中间。

【讨论】：

难道没有办法自动执行此操作吗？使用下拉组件，它们应该检测它们是否离开屏幕并重新对齐，我们一直看到它，为什么没有已知的解决方案？

@tmarois 不妨看看headlessui.dev