Vue implementiert eine gleitende Navigation oben links und rechts

<Vorlage>
  <div Klasse="Debug-Index-Seite">
    <div Klasse="tab-layout" id="scroller">
      <ul v-for="(tab, idx) in tabList" :key="idx">
        <li
          :id="`tab-${tab.id}`"
          Klasse="Tab-Element"
          @click="beimKlicken aufTab(Tab)"
          :style="`Hintergrund:${tab.select ? 'rot' : 'keine'}`"
        >
          {{ tab.text }}
        </li>
      </ul>
    </div>
  </div>
</Vorlage>

Standard exportieren {

    Daten() {
        zurückkehren {
            RegisterkarteListe: [],
        }
    },

    erstellt() {
        lass Liste = [
            "Meine Adligen",
            "Edel 1",
            "Mein Edel 2",
            "Edle 3",
            "Edle 4",
            "Edle 5",
            "Meine edle 6",
            "Meine edle 7",
        ];

        Liste.fürJeden((Text, idx) => {
            diese.tabList.push({
                Text,
                id: idx, // Registerkartenkennung select: idx == 0, // ob es ausgewählt ist index: idx // wo es angezeigt wird });
        });
    },

    berechnet: {
        aktuellerTab() {
            gibt dies zurück.tabList.find(v => v.select);
        }
    },

    Methoden: {

        beiKlickTab(tabInfo) {
            lass curTab = dies.curTab;
            wenn (curTab.id == tabInfo.id) zurückgeben;
            let { index, id } = tabInfo;
            // Schieberegler let scroller = document.getElementById("scroller");
            lass Geschwindigkeit = scroller.scrollWidth / this.tabList.length;
            let tab = document.getElementById(`tab-${id}`);
            let bWidth = Dokument.Body.ClientWidth;
            // Klicken Sie rechts if (curTab.index < index && tab.clientWidth * index >= bWidth - speed) {
            // Gleitdistanz scroller.scrollLeft = (Index + 2) * Geschwindigkeit - bWidth;
            } sonst wenn (curTab.index > index && (tab.clientWidth * index - (scroller.scrollLeft + bWidth) < speed)) {
            // Gleitdistanz scroller.scrollLeft = (Index - 1) * Geschwindigkeit;
            }

            curTab.select = falsch;
            Dies.tabList[index].select = true;
        }
    }
}

.debug-index-page {
    Breite: 100 %;
    Überlauf: versteckt;


  .tab-layout {
    Breite: 100 %;
    Überlauf-x: scrollen;
    Anzeige: Flex;

    .tab-item {
      Breite: 1rem;
      Textausrichtung: zentriert;
    }
  }
}