Как получить заголовок активного элемента / просматриваемого в данный момент раздела и отобразить его (Bootstrap Vue ScrollSpy)? - PullRequest
Новая
       63

Как получить заголовок активного элемента / просматриваемого в данный момент раздела и отобразить его (Bootstrap Vue ScrollSpy)?

0 голосов
/ 20 апреля 2020

Я имею в виду Bootstrap Vue Scrollspy (https://bootstrap-vue.org/docs/directives/scrollspy/#scrollspy). Я использую Nuxt js.

На мои элементы ссылаются правильно и следят за содержимым. Я хотел бы получить элемент / раздел, который просматривается в данный момент, для обновления в div. Я знаю, что активный класс добавляется в просматриваемый элемент / раздел, но я не уверен, как его получить.

Это то, что у меня есть: 

 <div id="mobilescrollspy">          <--- Scrollspy headings in a dropdown     
        <b-nav v-b-scrollspy>
          <b-nav-item-dropdown text="Dropdown">
            <b-dropdown-item class="text-base self-center" href="#item-1">
              Item 1 Heading
            </b-dropdown-item>
            <b-dropdown-item class="text-base self-center" href="#item-2">
              Item 2 Heading
            </b-dropdown-item>
            <b-dropdown-item class="text-base self-center" href="#item-3">
              Item 3 Heading
            </b-dropdown-item>
          </b-nav-item-dropdown>
        </b-nav>
</div>

<div class="content">                <--- The content itself
  <div id="item-1">
      This is the content for item 1
  </div>
  <div id="item-2">
      This is the content for item 2
  </div>
  <div id="item-3">
      This is the content for item 3
  </div>
</div>

Если пункт 2 виден, я хочу текст, который показывает: «Заголовок пункта 2», как только я выделю пункт 3, этот раздел обновляется до «Item 2 Heading». Как мне этого добиться? Спасибо за помощь!

1 Ответ

1 голос
/ 20 апреля 2020

Слушатель событий, документированный в документации scrollspy , дает вам id текущего активного элемента. Вы можете использовать его для отображения того, что вы хотите.

Я выставил здесь базовый c пример: https://codesandbox.io/s/competent-cherry-o4o6h?file= / src / App. vue

Это базовый c, потому что он запрашивает $el чтобы найти активный элемент и получить его внутри HTML. Вместо этого в реальном приложении вы могли бы напрямую ссылаться на объект в навигации, который вы использовали для визуализации навигации в первую очередь (и, следовательно, избегать запросов к DOM).

Для создания этого примера я использовал только код из документации я добавил вычисляемое свойство (getSectionTitle) и одну необязательную функцию: я заметил, что при прокрутке вверх не происходит никакого события, и я подумал, что было бы хорошо, если бы я очистил выбранный раздел (так же, как scrollspy больше не выбирает любой элемент). Поэтому я добавил scrollListener в mounted, удаленный в beforeDestroy, который, когда #nav-scorller прокручивается до вершины, сбрасывает section в ''.
В остальном это довольно просто c.

Опять же, этот дополнительный слушатель на самом деле не нужен. Я просто подумал, что было бы хорошо показать, как это можно сделать, и служить примером для тех, кому это может понадобиться в будущем.

...