javascript - 有没有办法在 scrollspy 下拉列表的文本没有监视任何内容时将其更新为默认文本？

Question

我是 Vue 新手，正在使用 Bootstrap Vue Scrollspy( https://bootstrap-vue.org/docs/directives/scrollspy#example-using-navs )。我的下拉菜单很粘，并且正在监视所有引用的内容。粘性下拉菜单的文本会随 View 中的当前部分更新。

这就像我的代码:https://codesandbox.io/s/festive-tree-1w3hx?file=/src/App.vue

有什么方法可以将下拉菜单的文本设置为默认文本，例如上面链接中的“内容”？这样每次滚动监视完成时，它只是将下拉列表的文本变成默认文本？我不喜欢这种方法的地方是我需要在 #nav-scroller 上有一个高度属性，而且由于我处理的是动态数据，所以我不认为这是我的一个选择。双滚动条也是我不想要的。

我试图通过使用 Stickybits( https://dollarshaveclub.github.io/stickybits/ ) 使下拉列表在我的代码中保持粘性，我还尝试检查它们是否有一个功能，当位置不粘时我可以触发一个事件，然后是下拉菜单更改为默认文本，但根据我的研究，我认为它们不会更改？

此外，我尝试过 overflow hidden ，但这并没有解决问题。

我正在尝试找到一种无需 jQuery 即可实现的方法。希望得到一些帮助，谢谢。

Answer 1

我花了一点时间来理解这个要求，但是当没有选择任何部分时，您似乎想要一个自定义下拉按钮文本。为了让事情更容易控制，我把它完全干了:

• 我在 data 中放置了一个 emptySectionMessage 和一个 defaultDropdownText
• 我创建了一个 dropdownText 计算属性，它在 scrollspy 有目标时返回 sectionTitle，否则返回 defaultDropdownText。

随意将数据属性值更改为您需要的任何值。

在这里查看它的工作情况:https://codesandbox.io/s/sweet-montalcini-bexqu?file=/src/App.vue