스크롤 스파이 드롭다운이 아무것도 감시하지 않을 때 기본 텍스트로 업데이트하는 방법이 있습니까?
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와 같은 코드입니다.
위의 링크에서 "Contents"와 같이 드롭다운 텍스트를 기본 텍스트로 설정할 수 있는 방법이 있습니까?스크롤스피잉이 완료될 때마다 드롭다운 텍스트가 기본 텍스트로 변경된다는 건가요?이 접근 방식이 마음에 들지 않는 것은 높이 속성이 필요하기 때문입니다.#nav-scroller
동적 데이터를 다루고 있기 때문에 이 옵션을 선택할 수 없습니다.더블 스크롤 바도 원하지 않습니다.
Stickybits(https://dollarshaveclub.github.io/stickybits/),)를 사용하여 코드의 드롭 다운을 스틱으로 하려고 했습니다.또한 위치가 스틱이 아닐 때 이벤트를 발생시킬 수 있는 기능이 있는지 확인하고 드롭다운 텍스트가 기본 텍스트로 변경되어 있는데, 제가 조사한 바로는 그렇지 않은 것 같습니다.
또한 오버플로를 숨겨봤지만 해결되지 않습니다.
저는 jQuery 없이 이것을 달성할 수 있는 방법을 찾고 있습니다.도와주시면 감사하겠습니다.
요건을 이해하는 데 시간이 좀 걸렸지만 섹션이 선택되지 않았을 때 커스텀 드롭다운 버튼 텍스트를 원하는 것 같습니다.제어하기 쉽도록 완전히 건조하게 만들었습니다.
- 내가 배치한 것은
emptySectionMessage
및 adefaultDropdownText
에data
- 작성했습니다.
dropdownText
반환되는 계산 속성sectionTitle
스크롤 스파이에 타겟이 있는 경우defaultDropdownText
그렇지않으면.
데이터 프로포트의 값을 원하는 대로 변경하십시오.
자세한 내용은 https://codesandbox.io/s/sweet-montalcini-bexqu?file=/src/App.vue를 참조하십시오.
언급URL : https://stackoverflow.com/questions/61543445/is-there-a-way-to-update-a-scrollspy-dropdowns-text-when-it-is-not-spying-on-an
'source' 카테고리의 다른 글
전원 오퍼레이터(^)가 작동하지 않는 이유는 무엇입니까? (0) | 2022.08.18 |
---|---|
Java 코멘트에서의 /** 및 /* (0) | 2022.08.18 |
시스템 위치: 1바이트!= 8비트? (0) | 2022.08.18 |
"$attrs is read only", "$listeners is read only", "프로포트를 직접 변환하지 마십시오." (0) | 2022.08.18 |
Vuex 개체를 비울 때 Vue 프로젝트에서 정의되지 않은 오류를 방지하려면 어떻게 해야 합니까? (0) | 2022.08.18 |