网站首页菜单顶部下拉上下布局以及可关闭标签页实现vue+elementui

复制代码
<template>

  <div id="app">

    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      router
      active-text-color="#ffd04b">

      <el-submenu :index="item.path" :key="item.path" v-for="item in sidebarRouters" v-if="item.meta">
        <template slot="title" >{{ item.meta.title }}</template>
        <el-menu-item  :key="child.path" :index="item.path+'/'+child.path" v-for="child in item.children" v-if="child.meta" >
          {{ child.meta.title }}
        </el-menu-item>
      </el-submenu>

      <!--
      <el-menu-item index="/1" v-for="item of sidebarRouters">
        <span v-if="item.meta"> {{item.meta.title}} </span>
      </el-menu-item>
    <el-menu-item index="/bar" >消息中心</el-menu-item>
      <el-menu-item index="/foo" >消息中心2</el-menu-item>
      <el-menu-item index=""><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
    </el-menu>

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <el-tag
      :key="tag"
      v-for="(tag ,index) in dynamicTags"
      closable
      :disable-transitions="false"
      :effect="tag.effect"
      @click="handleClick(tag)"
      @close="handleClose(tag)">
      <router-link :to="tag.path"> {{tag.name}} </router-link>
    </el-tag>

    <router-view></router-view>

  </div>

</template>

<script>

import {mapState} from "vuex";
import store from '@/store'
export default {
  name: 'Layout',
  data() {
    return {
      effectValue:'plain',
      dynamicTags: [{name:'首页',path:'/',effect:'plain'}],
      activeIndex2: '0',
      menuIndexName:{'/system/user':'用户管理', '/system/role':'角色管理',  '/system/menu':'菜单管理',  '/system/dept':'部门管理', '/system/dict':'字典管理', '/system/post':'岗位管理','/system/job':'任务管理', '/system/config':'参数管理', '/system/notice':'通知公告', '/system/logininfor':'登录日志', '/system/operlog':'操作日志'},
      sidebarRouters: store.getters.sidebarRouters
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      //console.log(JSON.stringify(store.getters.sidebarRouters))
      console.log(key, keyPath);
      //置灰其它菜单按钮tag
      this.dynamicTags.forEach(item => {
        item.effect='plain';
      });
      //激活当前菜单按钮tag
      let menuName = this.menuIndexName[keyPath[1]];
      let menuNameJson={name:menuName, path:keyPath[1],effect:'dark'};
      this.dynamicTags.push(menuNameJson);

      //this.$router.push({path: keyPath});
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      //激活后一个按钮tag
      if(this.dynamicTags.length>1){
        let dynamicTagsCur = this.dynamicTags[this.dynamicTags.length-1];
        dynamicTagsCur.effect='dark';
        let returnUrl = dynamicTagsCur.path;
        //刷新路由
        //this.$router.replace(decodeURIComponent(returnUrl || '/'));
        this.$router.push({
          path: returnUrl,
          query: {
            ...this.$route.query,
            timestamp: Date.now()
          }
        });
      }
    },
    handleClick(tag){
      //置灰其它菜单按钮tag
      this.dynamicTags.forEach(item => {
        item.effect='plain';
      });
      //单击事件激活当前按钮
      tag.effect='dark';

    }
  }
};

</script>

<style scoped lang="scss">
.el-tag + .el-tag {
  margin: 5px;
}
</style>
相关推荐
一个处女座的程序猿O(∩_∩)O42 分钟前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
还是大剑师兰特1 小时前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
可触的未来,发芽的智生1 小时前
触摸未来2025-10-25:蓝图绘制
javascript·python·神经网络·程序人生·自然语言处理
用户47949283569151 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
非凡ghost2 小时前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端
非凡ghost2 小时前
VisualBoyAdvance-M(GBA模拟器) 中文绿色版
前端·javascript·后端
非凡ghost2 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·javascript·后端
麦麦大数据2 小时前
F034 vue+neo4j 体育知识图谱系统|体育文献知识图谱vue+flask知识图谱管理+d3.js可视化
javascript·vue.js·知识图谱·neo4j·文献·体育·知识图谱管理
非凡ghost2 小时前
ProcessKO(查杀隐藏危险进程)多语便携版
前端·javascript·后端
守正出琦3 小时前
HTML 常用标签速查表
前端·javascript·html