3

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

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

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

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

另外，我尝试过隐藏溢出，但这并不能解决问题。

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

4

1 回答 1

4

花了我一点时间来理解要求，但是当没有选择任何部分时，您似乎想要一个自定义下拉按钮文本。为了使事情易于控制，我将其完全干燥：

  • 我把一个emptySectionMessage和一个defaultDropdownText放在data
  • 我创建了一个dropdownText计算属性，该属性sectionTitle在 scrollspy 有目标或defaultDropdownText其他情况时返回。

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

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

于 2020-05-03T20:40:57.437 回答