Implementierung des Vue-Top-Tags-Browserverlaufs

npm installiere Element-Größenänderungsdetektor

<Vorlage>
  <div>
    <div Klasse="Tags">
      <!-- Pfeil nach links -->
      <div
        Klasse="Pfeil Pfeil_links"
        v-show="Pfeil sichtbar"
        @click="handleClickToLeft"
      >
        <i Klasse="el-icon-arrow-left"></i>
      </div>
      <!-- Tag-Inhalt -->
      <div Klasse = "tags_content" ref = "box">
        <span ref="tags">
          <el-tag
            v-for="(Tag, Index) in Tags"
            :Schlüssel="tag.name"
            :Klasse="[aktiv == Index ? 'aktive Top-Tags' : 'Top-Tags']"
            Effekt="dunkel"
            :closable="tag.name != 'ErsteSeite1'"
            @close="handleClose(index, tag)"
            @click="clickTag(index, tag)"
            @contextmenu.native.prevent="handleClickContextMenu(index, tag)"
          >
            {{ $t("router." + tag.name) }}
          </el-tag>
        </span>
      </div>
      <!-- Pfeil nach rechts -->
      <div
        Klasse="Pfeil Pfeil_rechts"
        v-show="Pfeil sichtbar"
        @click="Klick nach rechts handhaben"
      >
        <i Klasse="el-icon-arrow-right"></i>
      </div>
    </div>
    <!-- Rechtsklickmenü-->
    <ul
      v-show="Kontextmenü.istAnzeigen"
      :style="{ links: contextMenu.menuLeft, oben: '96px' }"
      Klasse = "el-Dropdown-Menü el-Popper"
      x-placement="unteres Ende"
    >
      <li
        v-if="dieses.aktive == dieses.Kontextmenü.index"
        Klasse="el-dropdown-menu__item"
        @click="aktualisieren"
      >
        Aktualisieren
      <li class="el-dropdown-menu__item" @click="closeRightTag">
        Rechte Seite schließen</li>
      <li class="el-dropdown-menu__item" @click="closeOtherTag">
        Andere schließen</li>
      <div x-arrow="" Klasse="popper__arrow" Stil="links: 44px;"></div>
    </ul>
  </div>
</Vorlage>

<Skript>
importiere elementResizeDetectorMaker aus „element-resize-detector“;
Standard exportieren {
  Daten() {
    zurückkehren {
      // Gibt es einen Pfeil arrowVisible: true,
      //Anzahl Klicks: 0,
      aktiv: 0,
      Stichworte: [],
      // Klicken Sie mit der rechten Maustaste auf das Element contextMenu: {
        Index: 0,
        Etikett: {},
        Menü links: 0,
        isShow: false
      }
    };
  },
  betrachten:
    $route() {
      dies.getThisPage();
    },
    tags() {
      dies.listenFun(dies.$refs.tags, "tags");
    }
  },
  montiert() {
    dies.listenFun(diese.$refs.box, "box");
    var das = dies;
    document.addEventListener("klicken", function(e) {
      that.contextMenu.isShow = false;
    });
  },
  Methoden: {
    // Überwachen Sie die Breite des sichtbaren Bereichs und führen Sie listenFun(monitor, dom) aus, wenn sich die Größe des Browserfensters ändert {
      lass boxWidth = this.$refs.box.offsetWidth,
        tagsWidth = this.$refs.tags.offsetWidth,
        erd = elementResizeDetectorMaker();
      erd.listenTo(monitor, ele => {
        dies.$nextTick(() => {
          Wenn (
            (dom == "box" und ele.offsetWidth >= tagsWidth) ||
            (dom == "tags" und ele.offsetWidth <= boxWidth)
          ) {
            Dies.arrowVisible = false;
            dies.$refs.box.style.paddingLeft = "16px";
            dies.$refs.box.style.paddingRight = "16px";
            this.$refs.box.style.transform = "TranslateX(0px)";
            diese.num = 0;
          } anders {
            Dies.arrowVisible = true;
            dies.$refs.box.style.paddingLeft = "56px";
            dies.$refs.box.style.paddingRight = "56px";
          }
        });
      });
    },
    // Aktuelle Seite ermitteln getThisPage() {
      lass currentPgae = this.$route;
      // Bestimmen, ob die aktuelle Seite in den Tags vorhanden ist var index = this.tags.findIndex(tag => tag.name == currentPgae.name);
      wenn (Index == -1) {
        dies.tags.push({
          Name: aktuellerSeite.name,
          Pfad: currentPgae.path
        });
      }
      //Derzeit ausgewählte Seite this.active = this.tags.findIndex(tag => tag.name == currentPgae.name);
    },
    // Tag schließen handleClose(index, tag) {
      dies.tags.splice(dies.tags.indexOf(tag), 1);
      wenn (index == diese.tags.länge) {
        dies.aktiv = Index - 1;
        dies.$router.push(dies.tags[index - 1].pfad);
      } anders {
        dies.$router.push(dies.tags[index].pfad);
      }
    },
    // Klicken Sie auf das Tag clickTag(index, tag) {
      dies.aktiv = Index;
      dies.$router.push(tag.path);
    },
    // Linke Taste handleClickToLeft() {
      wenn (diese.zahl > 0) {
        diese.nummer--;
        dies.$refs.box.style.transform = `TranslateX(-${this.num * 200}px)`;
      }
    },
    // Rechte Taste handleClickToRight() {
      // Das letzte Tag wird von der linken Seite des Browsers aus gemessen let lastChild = document
        .querySelectorAll(".top_tags")
        [this.tags.length - 1].getBoundingClientRect().right;
      // Breite des sichtbaren Fensters let bodyWidth = document.body.offsetWidth;
      // Rechter Pfeil 48 + rechter Rand 16
      wenn (BodyWidth - letztes Kind <= 64) {
        diese.num++;
        dies.$refs.box.style.transform = `TranslateX(-${this.num * 200}px)`;
      }
    },
    // Rechtsklick handleClickContextMenu(index, tag) {
      this.contextMenu.isShow = true;
      dieses.Kontextmenü.index = Index;
      this.contextMenu.tag = Tag;
      let isTag = Dokument
        .querySelectorAll(".top_tags")
        [index].getBoundingClientRect();
      this.contextMenu.menuLeft = isTag.left – 48 + isTag.width / 2 + "px";
    },
    // Aktualisieren refresh() {
      dies.$router.go(0);
    },
    // Andere schließen closeOtherTag() {
      sei tagsLin = this.tags.length,
        { index, tag, menuLeft } = dieses.Kontextmenü;
      wenn (Index != 0) {
        diese.tags = [
          {
            Name: "ErsteSeite1",
            Pfad: "/Erste/Seite1"
          },
          {
            Name: tag.name,
            Pfad: tag.pfad
          }
        ];
      } anders {
        diese.tags = [
          {
            Name: "ErsteSeite1",
            Pfad: "/Erste/Seite1"
          }
        ];
      }
      dies.aktiv = Index;
      dies.$router.push(tag.path);
    },
    // Rechte Seite schließen closeRightTag() {
      sei tagsLin = this.tags.length,
        { index, tag, menuLeft } = dieses.Kontextmenü;
      dies.tags.splice(index + 1, tagsLin - index);
      dies.aktiv = Index;
      dies.$router.push(tag.path);
    }
  },
  erstellt() {
    // Auf Seitenaktualisierung warten window.addEventListener("beforeunload", e => {
      localStorage.setItem(
        "tagInfo",
        JSON.stringify({
          aktiv: dies.aktiv,
          Schlagworte: diese.tags
        })
      );
    });
    let tagInfo = localStorage.getItem("tagInfo")
      ? JSON.parse(localStorage.getItem("tagInfo"))
      : {
          aktiv: 0,
          Schlagworte: [
            {
              Name: "ErsteSeite1",
              Pfad: "/Erste/Seite1"
            }
          ]
        };
    dies.aktiv = tagInfo.aktiv;
    dies.tags = tagInfo.tags;
  }
};
</Skript>
<style lang="less" scoped>
/deep/.el-tag--dark {
  Rahmenfarbe: transparent;
}
/tief/.el-tag--dark .el-tag__close {
  Farbe: #86909c;
  Schriftgröße: 16px;
}
/deep/.el-tag--dark .el-tag__close:hover {
  Hintergrund: #e7eaf0;
}
.tags {
  Position: relativ;
  Überlauf: versteckt;
  .Pfeil {
    Breite: 48px;
    Textausrichtung: zentriert;
    Cursor: Zeiger;
    Hintergrund: #fff;
    Position: absolut;
    Z-Index: 1;
    &_links {
      links: 0;
      oben: 0;
    }
    &_Rechts {
      rechts: 0;
      oben: 0;
    }
  }
  &_Inhalt {
    Übergang: 0,3 s;
    Leerzeichen: Nowrap;
    // Polsterung: 0 16px;
  }
  .top_tags {
    Rand rechts: 8px;
    Cursor: Zeiger;
    Hintergrund: #fff;
    Schriftgröße: 12px;
    Schriftstärke: 400;
    Farbe: #1d2129;
  }
  .top_tags:schweben,
  .aktiv,
  .Pfeil:schweben {
    Hintergrund: #e7eaf0;
  }
}
</Stil>