Как прокрутить вкладки в VueJS с помощью Bootstrap-vue - PullRequest
Новая
       60

Как прокрутить вкладки в VueJS с помощью Bootstrap-vue

0 голосов
/ 28 февраля 2019

У меня есть VueJS с проектом bootstrap-vue.Отображается список вкладок, но он больше ширины родительского элемента.Поэтому я хочу иметь пару кнопок для прокрутки списка слева направо.

Я нашел этот пример, который я получил, работая в моем собственном проекте. Горизонтальная прокрутка с использованием кнопок в VueJS Но я не могу заставить его работать с вкладками.

В методах, которые я нацеливаю на .nav-tabs, потому что это класс, который отображается в DOM,Я попытался выяснить это с помощью. $ Refs, но не смог добраться до фактического элемента, потому что этот элемент виден только после визуализации.

Может кто-нибудь помочь с прокруткой вкладок.

https://jsfiddle.net/timmyl/xg8j7knb/19/

<div id="app">
  <div class="container">
    <b-row class="wrap" ref="wrap">
      <b-tabs content-class="mt-3">
        <b-tab v-for="category in categories" v-bind:title="category.name" :key="category.id">
        </b-tab>
        <b-tab>
          Content
        </b-tab>
      </b-tabs>
    </b-row>
    <b-row>
      <button @click="scroll_left">Scroll Left</button>
      <button @click="scroll_right">Scroll Right</button>
    </b-row>
  </div>
</div>

methods: {
     scroll_left() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft -= 50;
    },
    scroll_right() {
      let content = document.querySelector(".nav-tabs");
      content.scrollLeft += 50;
    }

.tab-panel {
  flex-wrap: nowrap;
}

.wrap {
  overflow: hidden;
  width: 100%;
  flex-direction: row;
}

.nav-tabs {
  flex-wrap: nowrap;
  white-space: nowrap;
}

1 Ответ

0 голосов
/ 28 февраля 2019

вам просто нужно немного настроить CSS, так как в настоящее время содержимое списка расширяется до полного экрана, и вам нужно добавить свойство overflow, чтобы содержимое можно было прокручивать,

, поэтому здесьчто вам не хватает: 

.nav-tabs {
flex-wrap: nowrap;
white-space: nowrap;
max-width: 500px;
overflow: auto;
}

Я только что изменил вашу песочницу и добавил вышеуказанное свойство к .nav-tabs

https://jsfiddle.net/Ljk5a62v/

...