tagNav.vue

<template>
  <div class="tabNav">
    <el-tabs
      v-model="pageCurrent"
      type="card"
      closable
      @tab-click="tabChange"
      @tab-remove="removeTab"
    >
      <el-tab-pane v-for="item in pageLists" :key="item.path" :name="item.path">
        <span slot="label">
          <span>{{ item.content }}</span>
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageCurrent: '',
      repeatBefore: [],
      repeatAfter: [],
      pageLists: [],
    };
  },

  watch: {
    $route: {
      handler(to) {
        //当路由改变时,检测该路由是否已经在打开的页面之中,如果不在,就添加进去
        this.pageCurrent = to.path;
        if (to.path === '/changelog') {
          this.pageLists = [
            {
              path: to.path,
              content: '上线公告板',
            },
          ];
          this.repeatBefore = [];
        } else if (!this.pageLists.map(v => v.path).includes(to.path)) {
          const indexNumber = this.$route.meta.breadcrumb.length;
          this.repeatBefore.push({
            path: to.path,
            content: this.$route.meta.breadcrumb[indexNumber - 1].name,
          });
          //修复标签栏数组过长时溢出问题
          if (this.repeatBefore.length > 12) {
            this.repeatBefore.splice(0, 1);
          }
          this.pageLists = this.repeatBefore;
        }
      },
    },
  },
  methods: {
    removeTab(targetName) {
      if (this.pageLists.length == 1) {
        location.replace(document.referrer);
      }
      var tabs = this.pageLists;
      let activeName = this.pageCurrent;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.path === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.path;
            }
          }
        });
        tabs.forEach(function(item, index, arr) {
          if (item.path == targetName) {
            arr.splice(index, 1);
          }
        });
      }
      this.repeatBefore = tabs;
      this.$router.push({ path: activeName });
    },
    tabChange(tab) {
      this.$router.push({ path: tab.name });
    },
  },
};
</script>
<style scoped>
.tabNav
  >>> .el-tabs--card
  > .el-tabs__header
  .el-tabs__item.is-active:hover
  .el-icon-close {
  display: inline-block;
}
.tabNav
  >>> .el-tabs--card
  > .el-tabs__header
  .el-tabs__item:hover
  .el-icon-close {
  display: none;
}
.tabNav >>> .el-tabs__item {
  padding: 0 10px;
  line-height: 32px;
}
.tabNav >>> .el-tabs__nav-scroll {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 32px;
  max-width: 60%;
  top: 9px;
  line-height: 30px;
  margin: 0 8px 0 10px;
  color: #495060;
  background: #fff;
  font-size: 6px;
  box-shadow: inset 0 0 1px rgb(0 0 0 / 8%);
}
.tabNav >>> .el-tabs__item.is-active {
  color: #fff;
}
.tabNav >>> .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 1px solid #e4e7ed;
  border-bottom-left-radius: 2px;
  height: 31px;
}
.tabNav >>> .el-tabs--card > .el-tabs__header {
  border-bottom: none;
}
.tabNav
  >>> .el-tabs--card
  > .el-tabs__header
  .el-tabs__item.is-active.is-closable {
  background-color: #42b983;
  color: #fff;
}
</style>

您已经阅读00:00:00欢迎留言评论,喜欢的话就为作者点个赞或者赏颗糖吧! 分享