问题标签 [headless-ui]

我正在使用 Tailwind + Headless UI 在移动设备上创建一个汉堡菜单栏，以便在点击时显示菜单。但是当我点击菜单时，它不会自动关闭并创建一个糟糕的用户体验。

尝试在点击时手动添加关闭，但似乎不起作用。

我正在尝试将 TailwindUI / Headless UI 菜单（下拉菜单）添加到 Vue 并在控制台中收到两个错误：

不要使用内置或保留的 HTML 元素作为组件 id：menu

和

错误：< MenuButton /> 缺少父 < Menu /> 组件

我在 Laravel 8 应用程序中使用 Vue 3，这是 app.js 的样子：

这是视图的一个最小示例：

我已经尝试了所有我能想到的并且迷路了！有任何想法吗？

我目前正在玩 Headless UI，我似乎无法为任何组件设置样式。这是我的标签文件中的代码

我的问题很简单......我在我的应用程序中使用 HeadlessUI 的 Dialog 组件进行 React，当我点击退出模式时，我希望它不会关闭。在文档中，有对话框。处理此交互的叠加参数，但没有禁用它的设置。

有什么解决办法吗？这是我正在使用的组件的 HeadlessUI 文档的链接：https ://headlessui.dev/react/dialog

也许你知道 React 的那种“警报阻止模式”？

我正在使用一个无头 UI 选项卡组件，当我像下面的代码那样向按钮添加填充时，我希望所有按钮都有统一的填充，但这里似乎存在一些问题。

无头 UI 选项卡组件：

结果：

可能的原因：

按钮填充似乎由无头 UI 呈现两次，否则按钮本身具有所需的填充。

另外，如果有任何帮助，我添加了 .babelrc.js 并更新了 _document.js 以使双宏工作：

.babelrc.js

_document.js

非常感谢任何帮助或建议

编辑：将按钮更改为 div 解决了这个问题。我仍然不太确定它是如何解决的

我正在尝试@headlessui/vue在 Nuxt3 项目中运行包。

我可以在node_modules文件夹中看到包。

但我一直低于错误

Internal server error: Failed to resolve import "@headlessui/vue" from "components/LeftSideFilter.vue". Does the file exist?

LeftSideFilter.vue 文件代码

我非常需要有关 headlessUI 选项卡的帮助。我试图自己修复它并进行研究，但没有足够的资源来解决我的问题。我仍然不明白这是怎么回事，我也阅读了文档。

我正在尝试构建一个时髦的用例：

我有一个 HeadlessUI 对话框，在这个对话框中，有一个 HeadlessUI Menu 组件作为嵌套子组件，我想通过键盘快捷键触发菜单

我设法通过以下方式触发了对话框：

在我的菜单组件上：

这可以很好地触发菜单，但菜单也有一个搜索栏，所以每当我按下 p 键时，侦听器会再次触发并以编程方式关闭菜单

我查看了 headlessUI 代码，试图理解焦点陷阱代码，但它在我的头上，有没有办法检测父对话框是否有焦点？这样，如果焦点在菜单上，我可以忽略按键:)

解决方法：

在写这个问题时，我偶然发现了一个解决方法......它不是超级漂亮，所以也许有人可以想出一个更好的解决方案：

我想在 vue3 中使用无头 ui 模态，但问题是如果模态是一个组件，我不明白如何从父级（App.vue）切换模态。

我试图在 Modal.vue 中传递一个道具，但它不起作用，我的策略是使用 modalActive 道具并观察它并调用适当的函数来切换模式，但它根本不起作用。

无头 UI 中的示例使用了一个按钮，但它位于它自身的组件内部，因此显然它可以毫无问题地访问该组件的功能。

我的代码：

应用程序.vue

模态的.vue

我刚刚开始使用 VueJS 和 Tailwind，之前从未真正使用过任何与 npm 相关的东西。

我有下面的代码，使用 Tailwind 和 Headless UI，通过调试，我知道我喜欢 99% 的方式......除了持续的错误消息

未捕获的 ReferenceError：未定义帖子

我知道这应该是直截了当的，但是我在这里或通过 Google 找到的一切都没有奏效。我哪里错了？

违规行是const selected = ref(posts[30])我知道我需要以某种方式定义posts，但我不明白怎么做？