dvcp_v2_webapp/examples/components/mainContent.vue

<template>
  <section class="mainContent">
    <el-tabs class="layout" type="card" :value="currentTab" @tab-click="handleTabClick"
             @tab-remove="handleTabRemove">
      <el-tab-pane label="默认页" class="layoutItem">
        <ai-empty>欢迎使用村微产品库</ai-empty>
      </el-tab-pane>
      <el-tab-pane v-for="op in tabs" :key="op.name" :closable="op.name!='工作台'" :name="op.name" :label="op.label" lazy>
        <router-view/>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "mainContent",
  computed: {
    ...mapState(['apps']),
    currentTab() {
      let {name, query, hash} = this.$route
      return [name, query?.id, hash].join("")
    }
  },
  data() {
    return {
      tabs: []
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(v) {
        this.getTabs(v)
      }
    },
  },
  methods: {
    handleTabClick(tab) {
      let to = {}, selectedTab = this.tabs.find(e => e.name == tab.name)
      if (selectedTab) {
        to = {...selectedTab, params: {tabclick: 1}}
      } else {
        let {name, query, hash} = tab
        to = {name, query, hash, params: {tabclick: 1}}
      }
      this.$router.push({...to})
    },
    handleTabRemove(id = this.currentTab) {
      let tabs = JSON.parse(JSON.stringify(this.tabs)),
          index = tabs?.findIndex(e => id == e.name)
      if (id == this.currentTab) {
        let next = tabs?.[index + 1] || tabs?.[index - 1]
        this.handleTabClick(next)
      }
      this.tabs.splice(index, 1)
    },
    getTabs() {
      let {name, query, hash} = this.$route
      let tab = this.tabs.find(e => e.name == this.currentTab),
          tabName = [name, query?.id, hash].join("")
      if (tab) {
      } else if (tabName) {
        let menu = this.apps.find(e => e.name == name)
        this.tabs.push({name: tabName, query, hash, label: menu?.label})
      }
    },
  },
  created() {
    this.getTabs()
  }
}
</script>

<style lang="scss" scoped>
.mainContent {
  height: 100%;
  width: 100%;

  ::v-deep.layout {
    height: 100%;
    background: #F5F6F9;
    display: flex;
    flex-direction: column;

    & > .el-tabs__header {
      margin-bottom: 0;
      background: linear-gradient(180deg, #FCFCFC 0%, #E0E2E4 100%);
      height: 40px;
      display: flex;
      align-items: flex-end;
      border: none;

      .el-tabs__nav {
        border: none;
      }

      .el-tabs__item {
        padding: 0 8px 0 12px;
        text-align: left;
        min-width: 130px;
        height: 36px;
        line-height: 36px;
        border: none;
        color: #555;
        font-size: 12px;

        & + .el-tabs__item {
          margin-left: 2px;
        }

        .el-icon-close {
          float: right;
          width: auto;
          height: 100%;
          line-height: 36px;
          background: transparent;
          font-size: 16px;
          color: #89b;

          &:hover {
            color: #000;
          }
        }

        &.is-active {
          border: 1px solid #D8DCE3;
          border-bottom: none;
          border-radius: 4px 4px 0 0;
          background: #F5F6F9;
          color: #222;

          &:after {
            display: none;
          }
        }

        &:after {
          position: absolute;
          right: 0;
          content: " ";
          width: 1px;
          background: #D8DCE3;
          height: 24px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

    .el-tabs__content {
      flex: 1;
      min-height: 0;

      .el-tab-pane {
        height: 100%;
      }
    }
  }
}
</style>