Vue 路由器使 Bulma 下拉菜单消失

Posted 2023-02-22

【中文标题】Vue 路由器使 Bulma 下拉菜单消失

【英文标题】：Bulma dropdown disappears with Vue router

【发布时间】：2018-04-11 21:17:18

【问题描述】：

下拉菜单在普通页面上运行良好。

但是当我使用像 SPA 一样工作的 Vue-router 时，除非我快速向下移动光标，否则下拉菜单会在 navbar-item 及其子 navbar-link 之间消失。

路由器页面上的 html 中或路由器视图和导航之间没有间隙或边距。在普通网页上，导航栏项到下拉菜单之间的过渡是无缝的。但是在路由器页面上，一旦光标移出装在外部div内的内部标签，下拉菜单就会消失。

// outer tag
<div class="navbar-item has-dropdown is-hoverable">
    // inner tag
    <a class="navbar-link">More:</a>
</div>

设置 a style="height: 100%" 无法使 a 标签完全适合外部 div

https://bulma.io/documentation/components/navbar/

【问题讨论】：

您的代码中有错字。 is-hoverable 后面有一个冒号，而不是引号。

正确，只是示例代码中的一个错字。意思是按“

好的，你能添加 sn-p 来重现这个错误吗？我认为这不是 vue-router 的问题，而是样式或其他问题，但我的数据太少，无法给出好的答案。您可以使用top navbar-dropdown 的值。

【参考方案1】：

通过在具有 vue-router 子级的列上方添加换行符 <br> 来解决此问题。

永远不要过度复杂化 vue 或 bulma 的简单性！

【讨论】：

你在列上方添加了什么？

嗨@Ralf，不知道这个答案发生了什么。我想我添加了一个边距：0 或 z-index 或两者！