Vue implementiert Tab-Beschriftung (Beschriftung übertrifft automatisches Scrollen)

<Vorlage>
    <div Klasse="Hauptbox">
        <button @click="add">Hinzufügen</button>
        <div Klasse="Haupt-Box-Tab">
            <i @click="vorheriges"><<</i>
            <i @click="weiter">>></i>
            <div Klasse="Haupt-Box-Tab-Inhalt" ref="Tabs">
                <div Klasse="main-box-tab-roll">
                    <div v-for="(Element, Index) in Tabs" :Schlüssel="Index"
                         :Klasse="{'tab-item-action':actionName === item.name ,'tab-item':actionName !== item.name}"
                         @click.stop="KlickTab(Elementname,Index)">
                        <span>{{item.meta.title}}</span>
                        <i class="el-icon-close" @click.stop="schließen(item.name)"></i>
                    </div>
                </div>
            </div>
        </div>
        <div Klasse="Hauptbox-Inhalt">
            <div>{{Aktionsname}}</div>
        </div>
    </div>
</Vorlage>
<Skript>
    Standard exportieren {
        Name: "Index",
        Daten() {
            zurückkehren {
                Registerkarten: [],
                BewegungX: 0,
                Anzahl: 1,
                unbesetzt: 0,
                Anzahl der Tabs: 0,
                Aktionsname: "test1"
            }
        },
        betrachten:
            Aktionsname(Wert) {
                lass len = this.tabs.length
                // Wenn doppelte Daten vorhanden sind, beenden Sie die nachfolgende Funktionsausführung for (let i = 0; i < len; i++) {
                    wenn (diese.tabs[i].name === val) {
                        dies.$nextTick(() => {
                            dies.translateX((i + 1 - dies.tabsCount) * dies.width - dies.unoccupied)
                        })
                        zurückkehren
                    }
                }

                dies.tabs.push({
                    Name: `test${this.count}`,
                    Meta: {
                        Titel: `test${this.count}`
                    }
                })
                dies.$nextTick(() => {
                  // (Wie viele Registerkarten gibt es insgesamt – die Anzahl der Elemente, die sichtbar sind, wenn sie nicht versetzt sind) * Länge eines einzelnen Registerkartenbeschriftungselements – Breite des sichtbaren Teils des verdeckten Registerkartenelements this.translateX((this.tabs.length – this.tabsCount) * this.width – this.unoccupied)
                })
            }
        },
        montiert() {
            dies.tabs.push({
                Name: `test${this.count}`,
                Meta: {
                    Titel: `test${this.count}`
                }
            })
            dies.$nextTick(() => {
                let tabs = dies.$refs.tabs
                let getStyle = getComputedStyle(tabs.children[0].children[0], null)
                let marginLeft = parseFloat(getStyle.marginLeft.substr(0, getStyle.marginLeft.length - 2))
                let marginRight = parseFloat(getStyle.marginRight.substr(0, getStyle.marginRight.length - 2))
                // Tatsächliche Breite des Elements = Elementbreite + Rand this.width = marginLeft + marginRight + tabs.children[0].children[0].offsetWidth

                /**
                 * Die folgende Kommentarberechnungsmethode wird verwendet, um die Implementierungslogik zu verstehen**/
                // // Wie viele Elemente können im sichtbaren Bereich platziert werden = Breite des sichtbaren Bereichs / tatsächliche Breite des Unterelements // let num = tabs.offsetWidth / this.width

                // // Die Breite des sichtbaren Teils des verdeckten Registerkartenelements = die Breite des sichtbaren Bereichs - (tatsächliche Breite des untergeordneten Elements * in eine Ganzzahl umgewandelte Zahl)
                // this.unoccupied = tabs.offsetWidth - (this.width * parseInt(num))

                //Zum Schluss zum Rest vereinfacht (das Ergebnis ist das gleiche wie bei der Berechnung oben)
                dies.unbesetzt = tabs.offsetWidth % dies.width
                // In Ganzzahl umwandeln this.tabsCount = parseInt(tabs.offsetWidth / this.width)
            })
        },
        Methoden: {
            hinzufügen() {
                dies.zählen++
                this.actionName = `test${this.count}`
            },

            /**
             * Registerkarte wechseln**/
            KlickTab(Name) {
                wenn (dieser.Aktionsname !== Name) {
                    this.actionName = Name
                }
            },

            /**
             * Schließen Sie die Registerkarte**/
            schließen(Name) {
                lass len = this.tabs.length
                let jumpName = null
                wenn (Länge > 1) {
                    für (sei i = 0; i < len; i++) {
                        wenn (diese.tabs[i].name === name) {
                            dies.tabs.splice(i, 1)

                            Sprungname = diese.Tabs[i ? i - 1 : 0].Name
                            wenn (dieser.Aktionsname !== Sprungname && Name === dieser.Aktionsname) {
                                this.actionName = Sprungname
                            }

                            dies.$nextTick(() => {
                                dies.vorheriges()
                            })
                            zurückkehren
                        }
                    }
                }
            },

            /**
             * Nach rechts verschieben**/
            nächste() {
                // scrollWidth ist nicht genau // Verwenden Sie this.width * this.tabs.length um die Gesamtlänge zu berechnen let totalWidth = this.width * this.tabs.length

                dies.$nextTick(() => {
                    let dom = dies.$refs.tabs
                    // Sichtbarer Bereich < Scrollbereich (Scrollbereich kann nur verschoben werden, wenn er größer als der sichtbare Bereich ist)
                    // Bewegungsdistanz + sichtbarer Bereich = Breite des Scrollbereichs (die letzte Breite, die tatsächliche Breite beim Klicken) < Scrollbereichif (dom.clientWidth < Gesamtbreite && this.moveX + dom.clientWidth < Gesamtbreite) {
                        // this.moveX ist 0 minus der Breite des unbesetzten Raums this.moveX += this.moveX ? this.width : this.width - this.unoccupied
                        dies.übersetzenX(dies.verschiebenX)
                    }
                })
            },

            /**
             * Linker Versatz**/
            vorherige() {
                wenn (diese.moveX > 0) {
                    dies.moveX -= diese.width
                    dies.übersetzenX(dies.verschiebenX)
                }
            },

            /**
             * Beginnen Sie, Dom zu bewegen
             **/
            übersetzeX(x) {
                dies.moveX = x < 0 ? 0 : x
                dies.$refs.tabs.children[0].style.transform = ``übersetzenX(-${this.moveX}px)``
            }
        }
    }
</Skript>

<style lang="scss" scoped>
    .Hauptbox {
        Höhe: 500px;
        Breite: 500px;
        Polsterung: 10px 20px 20px 20px;

        .Hauptbox-Tab {
            Position: relativ;
            Polsterung: 10px 20px;
            Überlauf: versteckt;

            & > ich {
                Position: absolut;
                Cursor: Zeiger;
                unten: 15px;

                &:n-tes-Kind(1) {
                    links: 0;
                }

                &:n-tes-Kind(2) {
                    rechts: 0;
                }
            }

            .main-box-tab-content {
                Überlauf: versteckt;

                .main-box-tab-roll {
                    Übergang: Transformation 0,5 s;
                    Anzeige: Flex;
                    Elemente ausrichten: zentrieren;

                    div {
                        Flex-Schrumpfen: 0;
                        Cursor: Zeiger;
                        Breite: 130px;
                        Höhe: 25px;
                        Rand: 0,5px;
                        Anzeige: Flex;
                        Elemente ausrichten: zentrieren;
                        Inhalt ausrichten: Abstand dazwischen;

                        Spanne, ich {
                            Schriftgröße: 12px;
                        }

                        Spanne {
                            Rand links: 10px;
                            Überlauf: versteckt;
                            Leerzeichen: Nowrap;
                            Textüberlauf: Auslassungspunkte;
                        }

                        ich {
                            Rand rechts: 10px;
                        }
                    }
                }
            }

            .tab-item {
                Farbe: #cccccc;
                Hintergrundfarbe: rgba(255, 255, 255, .5);
                Rahmenradius: 0 1px 0 1px;
                Rand: 1px durchgezogen #052141;
            }

            .tab-item-action {
                Farbe: #ffffff;
                Hintergrund: rgba (0, 180, 255, 0,8);
                Rahmenradius: 0 1px 0 1px;
                Rand: 1px durchgezogen #1E2088;
            }

        }

        .Hauptbox-Inhalt {
            Höhe: berechnet (100 % – 70 Pixel);
            Polsterung: 10px;
            Rand: 1px sattelbraun durchgezogen;
            Hintergrundgröße: 100 % 100 %;
        }
    }
</Stil>