<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>
网站首页菜单顶部下拉上下布局以及可关闭标签页实现vue+elementui
xiaogg36782025-06-07 14:22
相关推荐
liaojuajun19 小时前
可视化地图小高00719 小时前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战我是日安19 小时前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options吹晚风吧19 小时前
什么是跨域?跨域怎么解决?跨域解决的是什么问题?小*-^-*九1 天前
Electron vue项目 打包 exe文件gplitems1231 天前
Gunslinger – Gun Store & Hunting WordPress Theme: A ResponsibleWinson℡1 天前
React Native 中的 useCallback谢尔登1 天前
【Nest】基本概念老华带你飞1 天前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)EveryPossible1 天前
带有渐变光晕