elementui el-tabs做多页签的实践

效果

功能点

1、多标签页打开
2、右键 刷新、关闭、关闭其他、关闭所有

版本

“vue”: “^3.0.0”
“vue-router”: “^4.0.0-0”
“element-plus”: “^1.2.0-beta.3”

核心点部分

1、关于右键点击

通过contextmenu事件可以获取鼠标右键所点击的位置。可以用绝对定位，控制右键菜单的出现位置

 rightEvent(e) {
      this.tabId = e.srcElement.id.replaceAll('tab-', '');
      if (e.srcElement.id.includes('tab')) {
        this.MenuTop = e.clientY;
        this.MenuLeft = e.clientX;
        this.MenuShow = true;
      }
    },

2、关于多标签的实现

第一部分控制显示多tab，第二部分控制路由。

通过监听当前的显示激活的的tabId来显示对应的路由。

3、关于右键刷新面板的实现

这个思路是通过把当前的页面的路由地址当作参数 重定向到另一个页面，然后再从另一个页面路由跳回来，相当于从A路由到B，再从B路由到A。

<div class="rightMenu" @click="refreshTab">刷新</div>

4、关于点击其他地方隐藏右键菜单

右键菜单是通过MenuShow参数来控制显示与隐藏。
通过监听MenuShow参数，当显示的时候，给页面增加点击事件，从来达到右键其他地方隐藏的效果。

示例代码

1、首页

<template>
  <div class="main">
    <div class="navbar">
      <h1 class="logo">平台开发</h1>
    </div>
    <div class="center">
      <el-menu
          class="menu"
          default-active="0"
      >
        <el-menu-item :index="item.id" v-for="item in menus" :key="item.id"
                      @click="addTab(item.id, item.name)">
          <span>{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
      <div class="rightMenus" :style="`top: ${MenuTop}px; left: ${MenuLeft}px`" ref="rightMenus" v-show="MenuShow">
        <div class="rightMenu" @click="refreshTab">刷新</div>
        <div class="rightMenu" @click="closeTab">关闭</div>
        <div class="rightMenu" @click="closeOther">关闭其他</div>
        <div class="rightMenu" @click="closeAll">关闭所有</div>
      </div>
      <div class="content">
        <el-tabs
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-remove="removeTab"
            @tab-click="showCurrentTab"
            @contextmenu.prevent="rightEvent"
        >
          <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
          >
          </el-tab-pane>
        </el-tabs>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      MenuShow: false,
      MenuTop: 0,
      MenuLeft: 0,
      menus: [
        {
          name: '用户管理',
          id: '1',
          url: '/user'
        },
        {
          name: '角色管理',
          id: '2',
          url: '/role'
        },
        {
          name: '菜单管理',
          id: '3',
          url: '/menu-perm'
        },
        {
          name: '代码生成',
          id: '4',
          url: '/table-create'
        },
        {
          name: '模型管理',
          id: '5',
          url: '/model'
        },
        {
          name: '模型管理2',
          id: '6',
          url: '/model-test'
        }
      ],
      editableTabsValue: '2',
      editableTabs: [],
      tabIndex: 2,
      tabId: ''
    }
  },
  mounted() {
     let path = window.location.pathname;
     let menu = this.menus.filter(e => e.url === path);
     if (menu.length > 0) {
       this.addTab(menu[0].id, menu[0].name);
     }
  },
  watch: {
    MenuShow: {
      handler(val) {
        let fun = () => {
          this.MenuShow = false;
        }
        if (val) {
          document.addEventListener('click', fun);
        } else {
          document.removeEventListener('click', fun);
        }
      },
    },
    editableTabsValue: {
      immediate: true,
      handler(val, oldVal) {
        if (val && val != oldVal) {
          let menu = this.menus.filter(e => e.id === val);
          if (menu.length > 0) {
            this.$router.push({path: menu[0].url})
          }
        }
      }
    },
  },
  methods: {
    closeAll() {
      this.editableTabs = [];
      this.MenuShow = false;
    },
    closeOther() {
      let menus = this.menus.filter(e => e.id !== this.tabId).map(e => e.id);
      for (let i = 0; i < menus.length; i++) {
        this.removeTab(menus[i]);
      }
    },
    closeTab() {
      this.removeTab(this.tabId);
      this.MenuShow = false;
      this.showCurrentTab();
    },
    refreshTab() {
      this.MenuShow = false;
      this.editableTabsValue = this.tabId;
      let menus = this.menus.filter(e => e.id === this.tabId);
      this.$router.replace({path: '/redirect' + menus[0].url})
    },
    rightEvent(e) {
      this.tabId = e.srcElement.id.replaceAll('tab-', '');
      if (e.srcElement.id.includes('tab')) {
        this.MenuTop = e.clientY;
        this.MenuLeft = e.clientX;
        this.MenuShow = true;
      }
    },
    showCurrentTab() {
      let url = '';
      this.menus.forEach((menu) => {
        if (menu.id === this.editableTabsValue) {
          url = menu.url;
        }
      })
    },
    addTab(menuId, targetName) {
      let exists = false;
      this.editableTabs.forEach((tab) => {
        if (tab.name === menuId) {
          exists = true;
        }
      })
      if (!exists) {
        this.editableTabs.push({
          title: targetName,
          name: menuId,
          content: '',
        })
      }
      this.editableTabsValue = menuId
    },
    removeTab(targetName) {
      const tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
      this.showCurrentTab();
    },
  }
}
</script>

<style lang="less" scoped>
.main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .navbar {
    .logo {
      text-align: left;
      padding-left: 20px;
    }
  }
  .rightMenus {
    position: absolute;
    z-index: 999;
    background-color: white;
    width: 10rem;
    box-shadow: -2px 0 2px #F5F5F5, 2px 0 2px #F5F5F5;

    .rightMenu {
      font-size: 1.5rem;
      line-height: 3rem;
      padding-left: 1rem;
      cursor: pointer;

      &:hover {
        background-color: #F5F5F5;
      }
    }
  }
  .center {
    flex: 1;
    flex-grow: 1;
    display: flex;
    .menu {
      width: 200px;
    }
    .content {
      flex: 1;
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      /deep/ .el-tabs__nav {
        .is-active {
          background-color: #21c23c;
          color: white;
          &:before {
            content: '';
            position: absolute;
            left: 0.5rem;
            top: 50%;
            margin-top: -0.3rem;
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            background-color: white;
          }
        }
      }
    }
  }
}
</style>

2、重定向页面

<script>
export default {
  name: "index.vue",
  created() {
    let path = this.$route.params.path;
    this.$router.replace('/' + path)
  }
}
</script>

<style scoped>

</style>

3、路由

import {createRouter, createWebHistory} from 'vue-router'
import Home from '../views/Home.vue'
import {getToken} from "../util/token";
import Redirect from '../views/Redirect/index.vue';

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
        children: [
            {
                path: '/redirect/:path',
                name: 'redirect',
                component: Redirect
            },
            {
                path: '/user',
                name: 'user',
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () => import(/* webpackChunkName: "about" */ '../views/User/UserList.vue')
            },
            {
                path: '/menu-perm',
                name: 'menu-perm',
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () => import(/* webpackChunkName: "about" */ '../views/MenuPerm/MenuPermList.vue')
            },
            {
                path: '/role',
                name: 'role',
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () => import(/* webpackChunkName: "about" */ '../views/Role/RoleList.vue')
            },
            {
                path: '/table-create',
                name: 'table-create',
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () => import(/* webpackChunkName: "about" */ '../views/TableCreate/TableCreate.vue')
            },
            {
                path: '/model',
                name: 'model',
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () => import(/* webpackChunkName: "about" */ '../views/Model/ModelList.vue')
            }, {
                path: '/model-test',
                name: 'model-test',
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () => import(/* webpackChunkName: "about" */ '../views/Model/ModelTest.vue')
            }
        ]
    },
    {
        path: '/login',
        name: 'Login',
        component: () => import(/* webpackChunkName: "about" */ '../views/Login/Login.vue')
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

const whiteList = ['/login']

router.beforeEach((to, from, next) => {
    let token = getToken();
    if (token) {
        if (to.path === '/login') {
            next({path: '/'});
        } else {
            next()
        }
    } else {
        if (whiteList.indexOf(to.path) !== -1) {
            next()
        } else {
            next(`/login`)
        }
    }
})

export default router