Vueトップタグ閲覧履歴の実装

npm 要素サイズ変更検出器をインストールします

<テンプレート>
  <div>
    <div class="タグ">
      <!-- 左矢印 -->
      <div
        クラス="矢印 arrow_left"
        v-show="矢印表示"
        @click="左クリックハンドル"
      >
        <i class="el-icon-arrow-left"></i>
      </div>
      <!-- タグの内容 -->
      <div class="tags_content" ref="box">
        <span ref="タグ">
          <elタグ
            v-for="(タグ、インデックス) タグ内"
            :key="タグ名"
            :class="[active == index ? 'active top_tags' : 'top_tags']"
            効果="暗い"
            :closable="タグ名 != 'Firstpage1'"
            @close="handleClose(インデックス、タグ)"
            @click="clickTag(インデックス、タグ)"
            @contextmenu.native.prevent="handleClickContextMenu(インデックス、タグ)"
          >
            {{ $t("ルーター." + タグ名) }}
          </el-tag>
        </span>
      </div>
      <!-- 右矢印 -->
      <div
        クラス="矢印 arrow_right"
        v-show="矢印表示"
        @click="ハンドル右クリック"
      >
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <!-- 右クリックメニュー-->
    <ul
      v-show="contextMenu.isShow"
      :style="{ 左: contextMenu.menuLeft、上: '96px' }"
      class="el-dropdown-menu el-popper"
      x-placement="下端"
    >
      <li
        v-if="this.active == this.contextMenu.index"
        クラス="el-dropdown-menu__item"
        @click="更新"
      >
        リフレッシュ
      <li class="el-dropdown-menu__item" @click="closeRightTag">
        右側を閉じる</li>
      <li class="el-dropdown-menu__item" @click="その他のタグを閉じる">
        その他を閉じる</li>
      <div x-arrow="" class="popper__arrow" style="left: 44px;"></div>
    </ul>
  </div>
</テンプレート>

<スクリプト>
「element-resize-detector」から elementResizeDetectorMaker をインポートします。
エクスポートデフォルト{
  データ（） {
    戻る {
      // 矢印があるか arrowVisible: true,
      //クリック数: 0,
      アクティブ: 0,
      タグ: [],
      // 要素を右クリック contextMenu: {
        インデックス: 0,
        タグ: {},
        メニュー左: 0,
        isShow: 偽
      }
    };
  },
  時計：
    $ルート() {
      このページを取得します。
    },
    タグ() {
      this.listenFun(this.$refs.tags, "タグ");
    }
  },
  マウント() {
    this.listenFun(this.$refs.box, "ボックス");
    var that = this;
    document.addEventListener("クリック", function(e) {
      that.contextMenu.isShow = false;
    });
  },
  メソッド: {
    // 表示領域の幅を監視し、ブラウザウィンドウのサイズが変わったら listenFun(monitor, dom) を実行します {
      boxWidth = this.$refs.box.offsetWidthとします。
        tagsWidth = this.$refs.tags.offsetWidth、
        erd = 要素サイズ変更検出器メーカー();
      erd.listenTo(モニター、ele => {
        this.$nextTick(() => {
          もし （
            (dom == "box" && ele.offsetWidth >= tagsWidth) ||
            (dom == "tags" && ele.offsetWidth <= boxWidth)
          ）{
            this.arrowVisible = false;
            this.$refs.box.style.paddingLeft = "16px";
            this.$refs.box.style.paddingRight = "16px";
            this.$refs.box.style.transform = "TranslateX(0px)";
            this.num = 0;
          } それ以外 {
            this.arrowVisible = true;
            this.$refs.box.style.paddingLeft = "56px";
            this.$refs.box.style.paddingRight = "56px";
          }
        });
      });
    },
    // 現在のページを確認する getThisPage() {
      currentPgae = this.$route; とします。
      // タグ内に現在のページがあるかどうかを判断します var index = this.tags.findIndex(tag => tag.name == currentPgae.name);
      （インデックス == -1）の場合{
        this.tags.push({
          名前: currentPgae.name、
          パス: currentPgae.path
        });
      }
      //現在選択されているページ this.active = this.tags.findIndex(tag => tag.name == currentPgae.name);
    },
    // タグを閉じる handleClose(index, tag) {
      this.tags.splice(this.tags.indexOf(タグ), 1);
      if (インデックス == this.tags.length) {
        this.active = インデックス - 1;
        this.$router.push(this.tags[index - 1].path);
      } それ以外 {
        this.$router.push(this.tags[index].path);
      }
    },
    // タグをクリック clickTag(index, tag) {
      this.active = インデックス;
      this.$router.push(タグ.path);
    },
    // 左ボタンのhandleClickToLeft() {
      if (this.num > 0) {
        this.num--;
        this.$refs.box.style.transform = `TranslateX(-${this.num * 200}px)`;
      }
    },
    // 右ボタンのhandleClickToRight() {
      // 最後のタグはブラウザの左側から計測されます。let lastChild = document
        .querySelectorAll(".top_tags")
        [this.tags.length - 1].getBoundingClientRect().right;
      // 表示ウィンドウの幅 let bodyWidth = document.body.offsetWidth;
      // 右矢印 48 + 右余白 16
      （bodyWidth - lastChild <= 64）の場合{
        this.num++;
        this.$refs.box.style.transform = `TranslateX(-${this.num * 200}px)`;
      }
    },
    // 右クリック handleClickContextMenu(index, tag) {
      this.contextMenu.isShow = true;
      this.contextMenu.index = インデックス;
      this.contextMenu.tag = タグ;
      isTag = ドキュメント
        .querySelectorAll(".top_tags")
        [インデックス].getBoundingClientRect();
      this.contextMenu.menuLeft = isTag.left - 48 + isTag.width / 2 + "px";
    },
    // 更新 refresh() {
      this.$router.go(0);
    },
    // 他のタグを閉じる closeOtherTag() {
      tagsLin = this.tags.lengthとします。
        { インデックス、タグ、menuLeft } = this.contextMenu;
      （インデックス!= 0）の場合{
        タグ = [
          {
            名前: "Firstpage1",
            パス: "/First/page1"
          },
          {
            名前: タグ名、
            パス: タグ.パス
          }
        ];
      } それ以外 {
        タグ = [
          {
            名前: "Firstpage1",
            パス: "/First/page1"
          }
        ];
      }
      this.active = インデックス;
      this.$router.push(タグ.path);
    },
    // 右側を閉じる closeRightTag() {
      tagsLin = this.tags.lengthとします。
        { インデックス、タグ、menuLeft } = this.contextMenu;
      this.tags.splice(インデックス + 1、 tagsLin - インデックス);
      this.active = インデックス;
      this.$router.push(タグ.path);
    }
  },
  作成された() {
    // ページの更新をリッスンする window.addEventListener("beforeunload", e => {
      ローカルストレージ.setItem()
        「タグ情報」、
        JSON.stringify({
          アクティブ: this.active,
          タグ: this.tags
        })
      );
    });
    tagInfo = localStorage.getItem("tagInfo") とします。
      ? JSON.parse(localStorage.getItem("tagInfo"))
      : {
          アクティブ: 0,
          タグ: [
            {
              名前: "Firstpage1",
              パス: "/First/page1"
            }
          ]
        };
    this.active = タグ情報.active;
    タグ情報
  }
};
</スクリプト>
<style lang="less" スコープ>
/deep/.el-tag--dark {
  境界線の色: 透明;
}
/deep/.el-tag--dark .el-tag__close {
  色: #86909c;
  フォントサイズ: 16px;
}
/deep/.el-tag--dark .el-tag__close:hover {
  背景: #e7eaf0;
}
.タグ {
  位置: 相対的;
  オーバーフロー: 非表示;
  .矢印{
    幅: 48px;
    テキスト配置: 中央;
    カーソル: ポインタ;
    背景: #fff;
    位置: 絶対;
    zインデックス: 1;
    ＆_左 {
      左: 0;
      上: 0;
    }
    ＆_右 {
      右: 0;
      上: 0;
    }
  }
  ＆_コンテンツ {
    遷移: 0.3秒;
    空白: ラップなし;
    // パディング: 0 16px;
  }
  .トップタグ {
    右マージン: 8px;
    カーソル: ポインタ;
    背景: #fff;
    フォントサイズ: 12px;
    フォントの太さ: 400;
    色: #1d2129;
  }
  .top_tags:ホバー、
  。アクティブ、
  .arrow:hover {
    背景: #e7eaf0;
  }
}
</スタイル>