|
|
|
|
@ -1,11 +1,23 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="top-menu-style">
|
|
|
|
|
<div class="menu-list-style">
|
|
|
|
|
<div v-for="menu in menus" :key="menu.name"
|
|
|
|
|
:class="'menu-style ' + (menuName === menu.name?' router-menu-style':'')">
|
|
|
|
|
<my-icon :type="menu.iconType" class="icon-style"></my-icon>
|
|
|
|
|
<span @click="menuClick(menu)" class="menu-name-style">{{menu.title}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<template v-for="menu in menus">
|
|
|
|
|
<div v-if="menu.show"
|
|
|
|
|
:class="'menu-style ' + (menuName === menu.name?' router-menu-style':'') + (menu.role === 'public'?' public-menu-style':'')">
|
|
|
|
|
<my-icon :type="menu.iconType" class="icon-style"></my-icon>
|
|
|
|
|
<span @click="menuClick(menu)" class="menu-name-style">{{menu.title}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<a-popover placement="bottom" v-if="showMore" class="show-more-style">
|
|
|
|
|
<template slot="content" >
|
|
|
|
|
<div v-for="hiddenMenu in hiddenMenus" :key="hiddenMenu.name" class="hidden-menu-style" >
|
|
|
|
|
<my-icon :type="hiddenMenu.iconType" class="icon-style" ></my-icon>
|
|
|
|
|
<span @click="hiddenMenuClick(hiddenMenu)" class="menu-name-style" style="margin-left: 0.5rem;margin-top:0.5rem;cursor: pointer">{{hiddenMenu.title}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<my-icon :type="showMoreIconType" class="icon-style"></my-icon>
|
|
|
|
|
<span class="menu-name-style">{{showMoreTitle}}</span>
|
|
|
|
|
</a-popover>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="children-menu-list-style">
|
|
|
|
|
<template v-if="menuChildren">
|
|
|
|
|
@ -18,13 +30,20 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import {Popover} from 'ant-design-vue';
|
|
|
|
|
import _ from 'lodash';
|
|
|
|
|
export default{
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
menus: this.$store.state.userStore.menus,//所有菜单项
|
|
|
|
|
menus: _.cloneDeep(this.$store.state.userStore.menus),//所有菜单项
|
|
|
|
|
menuName: "",//选中菜单名称
|
|
|
|
|
menuChildren: [],//子菜单集合
|
|
|
|
|
childMenuName: "",//选中子菜单名称
|
|
|
|
|
windowWidth: document.body.clientWidth,
|
|
|
|
|
showMore: false,//是否展示更多按钮
|
|
|
|
|
showMoreTitle: "更多",
|
|
|
|
|
showMoreIconType:"icon-caidan",
|
|
|
|
|
hiddenMenus: [],//隐藏的菜单集合
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
props: ['pageName'],
|
|
|
|
|
@ -41,16 +60,55 @@
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
/*
|
|
|
|
|
* 计算菜单宽度和屏幕宽度之间的关系
|
|
|
|
|
* */
|
|
|
|
|
calcMenuWidth:function () {
|
|
|
|
|
this.menus = _.cloneDeep(this.$store.state.userStore.menus);//所有菜单项
|
|
|
|
|
let menuTotalWidth = 0;
|
|
|
|
|
let menuDomArr = document.getElementsByClassName("menu-style");
|
|
|
|
|
if (menuDomArr && menuDomArr.length > 0) {
|
|
|
|
|
let len = menuDomArr.length;
|
|
|
|
|
for (let i = 0; i < len; i++) {
|
|
|
|
|
let menuWidth = menuDomArr[i].clientWidth;
|
|
|
|
|
menuTotalWidth += menuWidth;
|
|
|
|
|
}
|
|
|
|
|
if (menuTotalWidth > this.windowWidth) {
|
|
|
|
|
/*
|
|
|
|
|
* 隐藏的菜单长度如果超过差异宽度 就隐藏
|
|
|
|
|
* */
|
|
|
|
|
let neetHiddenWidth = 0;
|
|
|
|
|
let hiddenIndex = -1;
|
|
|
|
|
for (let i = len - 1; i >= 0; i--) {
|
|
|
|
|
let hiddenWidth = menuDomArr[i].clientWidth;
|
|
|
|
|
neetHiddenWidth += hiddenWidth;
|
|
|
|
|
if (neetHiddenWidth > menuTotalWidth - this.windowWidth) {
|
|
|
|
|
hiddenIndex = i;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//设置隐藏 范围 hiddenIndex-menuDomArr.length
|
|
|
|
|
for (let i = hiddenIndex - 1; i < len; i++) {
|
|
|
|
|
this.menus[i].show = false;
|
|
|
|
|
this.hiddenMenus.push(this.menus[i]);
|
|
|
|
|
}
|
|
|
|
|
//展示更多
|
|
|
|
|
this.showMore = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
/*
|
|
|
|
|
* 一级菜单点击事件
|
|
|
|
|
* */
|
|
|
|
|
menuClick: function (menu) {
|
|
|
|
|
if (this.menuName !== menu.name) {
|
|
|
|
|
this.showMoreTitle = "更多";
|
|
|
|
|
this.showMoreIconType = "icon-caidan";
|
|
|
|
|
this.menuName = menu.name;
|
|
|
|
|
this.childMenuName = "";
|
|
|
|
|
this.menuChildren = this.getMenuChildren();
|
|
|
|
|
let path = menu.path;
|
|
|
|
|
if(this.menuChildren && this.menuChildren.length > 0){
|
|
|
|
|
if (this.menuChildren && this.menuChildren.length > 0) {
|
|
|
|
|
path = this.menuChildren[0].path;
|
|
|
|
|
this.childMenuName = this.menuChildren[0].name;
|
|
|
|
|
}
|
|
|
|
|
@ -66,6 +124,24 @@
|
|
|
|
|
this.replacePath(menu.path);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
/*
|
|
|
|
|
* 隐藏菜单点击事件
|
|
|
|
|
* */
|
|
|
|
|
hiddenMenuClick:function (menu) {
|
|
|
|
|
if (this.menuName !== menu.name) {
|
|
|
|
|
this.showMoreTitle = menu.title;
|
|
|
|
|
this.showMoreIconType = menu.iconType?menu.iconType:"";
|
|
|
|
|
this.menuName = menu.name;
|
|
|
|
|
this.childMenuName = "";
|
|
|
|
|
this.menuChildren = this.getMenuChildren();
|
|
|
|
|
let path = menu.path;
|
|
|
|
|
if (this.menuChildren && this.menuChildren.length > 0) {
|
|
|
|
|
path = this.menuChildren[0].path;
|
|
|
|
|
this.childMenuName = this.menuChildren[0].name;
|
|
|
|
|
}
|
|
|
|
|
this.replacePath(path);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
/*
|
|
|
|
|
* 根据当前menuName获取菜单对应的children
|
|
|
|
|
* */
|
|
|
|
|
@ -85,6 +161,9 @@
|
|
|
|
|
replacePath: function (path) {
|
|
|
|
|
this.$emit("replace", path);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
APopover: Popover
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
@ -108,6 +187,7 @@
|
|
|
|
|
.menu-name-style {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-left: 0.5rem;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.router-menu-style {
|
|
|
|
|
@ -119,6 +199,36 @@
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.public-menu-style{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.icon-style{
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
}
|
|
|
|
|
.menu-name-style{
|
|
|
|
|
font-size: 0.6rem;
|
|
|
|
|
margin-top: 0.2rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.show-more-style {
|
|
|
|
|
padding: 1.5rem 2rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
.icon-style{
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
}
|
|
|
|
|
.menu-name-style {
|
|
|
|
|
font-size: 0.6rem;
|
|
|
|
|
margin-top: 0.2rem;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.children-menu-list-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
