intellioa
/
super-fusion-platform
mirror of http://10.10.14.221/feiliming/oa-project-vue.git
6
0
Fork 0
Code Issues Projects Releases Wiki Activity

集优化项目菜单跳转问题处理

Browse Source
init
gongdi 4 years ago
parent b905502e32
commit 2c9c597b6d
3 changed files with 47 additions and 17 deletions
Show Stats Download Patch File Download Diff File

48
src/views/integrateOptimization/page/businessPages/topMenu.vue
Unescape View File

@ -9,10 +9,11 @@
</div> </div>
</template> </template>
<a-popover placement="bottom" v-if="showMore" class="show-more-style"> <a-popover placement="bottom" v-if="showMore" class="show-more-style">
<template slot="content" > <template slot="content">
<div v-for="hiddenMenu in hiddenMenus" :key="hiddenMenu.name" class="hidden-menu-style" > <div v-for="hiddenMenu in hiddenMenus" :key="hiddenMenu.name" class="hidden-menu-style">
<my-icon :type="hiddenMenu.iconType" class="icon-style" ></my-icon> <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> <span @click="hiddenMenuClick(hiddenMenu)" class="menu-name-style"
style="margin-left: 0.5rem;margin-top:0.5rem;cursor: pointer">{{hiddenMenu.title}}</span>
</div> </div>
</template> </template>
<my-icon :type="showMoreIconType" class="icon-style"></my-icon> <my-icon :type="showMoreIconType" class="icon-style"></my-icon>
@ -42,7 +43,7 @@
windowWidth: document.body.clientWidth, windowWidth: document.body.clientWidth,
showMore: false,//是否展示更多按钮 showMore: false,//是否展示更多按钮
showMoreTitle: "更多", showMoreTitle: "更多",
showMoreIconType:"icon-caidan", showMoreIconType: "icon-caidan",
hiddenMenus: [],//隐藏的菜单集合 hiddenMenus: [],//隐藏的菜单集合
} }
}, },
@ -63,7 +64,7 @@
/* /*
* 计算菜单宽度和屏幕宽度之间的关系 * 计算菜单宽度和屏幕宽度之间的关系
* */ * */
calcMenuWidth:function () { calcMenuWidth: function () {
this.menus = _.cloneDeep(this.$store.state.userStore.menus);//所有菜单项 this.menus = _.cloneDeep(this.$store.state.userStore.menus);//所有菜单项
let menuTotalWidth = 0; let menuTotalWidth = 0;
let menuDomArr = document.getElementsByClassName("menu-style"); let menuDomArr = document.getElementsByClassName("menu-style");
@ -94,6 +95,29 @@
} }
//展示更多 //展示更多
this.showMore = true; this.showMore = true;
this.handleHiddenMenu();
}
}
},
/*
* 处理跳转菜单为隐藏菜单
* */
handleHiddenMenu: function () {
let hiddenMenus = this.hiddenMenus;
let menuName = this.menuName;
for(let i = 0,len = hiddenMenus.length;i < len;i ++){
if(menuName === hiddenMenus[i].name){
this.showMoreTitle = hiddenMenus[i].title;
this.showMoreIconType = hiddenMenus[i].iconType ? hiddenMenus[i].iconType : "";
this.menuName = hiddenMenus[i].name;
this.childMenuName = "";
this.menuChildren = this.getMenuChildren();
let path = hiddenMenus[i].path;
if (this.menuChildren && this.menuChildren.length > 0) {
path = this.menuChildren[0].path;
this.childMenuName = this.menuChildren[0].name;
}
break;
} }
} }
}, },
@ -127,10 +151,10 @@
/* /*
* 隐藏菜单点击事件 * 隐藏菜单点击事件
* */ * */
hiddenMenuClick:function (menu) { hiddenMenuClick: function (menu) {
if (this.menuName !== menu.name) { if (this.menuName !== menu.name) {
this.showMoreTitle = menu.title; this.showMoreTitle = menu.title;
this.showMoreIconType = menu.iconType?menu.iconType:""; this.showMoreIconType = menu.iconType ? menu.iconType : "";
this.menuName = menu.name; this.menuName = menu.name;
this.childMenuName = ""; this.childMenuName = "";
this.menuChildren = this.getMenuChildren(); this.menuChildren = this.getMenuChildren();
@ -199,13 +223,13 @@
cursor: default; cursor: default;
} }
} }
.public-menu-style{ .public-menu-style {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.icon-style{ .icon-style {
font-size: 1rem; font-size: 1rem;
} }
.menu-name-style{ .menu-name-style {
font-size: 0.6rem; font-size: 0.6rem;
margin-top: 0.2rem; margin-top: 0.2rem;
} }
@ -218,7 +242,7 @@
align-items: center; align-items: center;
color: white; color: white;
font-size: 1.2rem; font-size: 1.2rem;
.icon-style{ .icon-style {
font-size: 1rem; font-size: 1rem;
} }
.menu-name-style { .menu-name-style {

10
src/views/integrateOptimization/page/homePage/fixedNavigation.vue
Unescape View File

@ -3,10 +3,10 @@
<div v-for="menu in menus" :key="menu.iconType" class="menu-style" @mouseenter="mouseenter(menu)" <div v-for="menu in menus" :key="menu.iconType" class="menu-style" @mouseenter="mouseenter(menu)"
@mouseleave="mouseleave(menu)"> @mouseleave="mouseleave(menu)">
<span v-show="isOpen && !menu.isBigger">{{menu.title}}</span> <span v-show="isOpen && !menu.isBigger">{{menu.title}}</span>
<my-icon v-show="!isOpen" :type="menu.iconType" :title="menu.title" class="menu-icon-style"></my-icon> <my-icon v-show="!isOpen" :type="menu.iconType" :title="menu.title" class="menu-icon-style" @click="toReplace(menu)"></my-icon>
<div v-show="isOpen && menu.isBigger" class="menu-bigger-style"> <div v-show="isOpen && menu.isBigger" class="menu-bigger-style">
<my-icon :type="menu.iconType" class="bigger-menu-icon-style"></my-icon> <my-icon :type="menu.iconType" class="bigger-menu-icon-style"></my-icon>
<span>{{menu.title}}</span> <span @click="toReplace(menu)">{{menu.title}}</span>
</div> </div>
</div> </div>
<div class="menu-style"> <div class="menu-style">
@ -57,6 +57,12 @@
this.$set(menu,"isBigger",false); this.$set(menu,"isBigger",false);
} }
}, },
/*
* 路由跳转
* */
toReplace:function (menu) {
this.$emit("replace",menu);
}
}, },
components: { components: {
AIcon: Icon AIcon: Icon

2
src/views/integrateOptimization/page/homePage/homePage.vue
Unescape View File

@ -2,7 +2,7 @@
<div class="system-home-page-style"> <div class="system-home-page-style">
<PageTop/> <PageTop/>
<BannerCarousel @replace="toReplace"/> <BannerCarousel @replace="toReplace"/>
<FixedNavigation/> <FixedNavigation @replace="toReplace"/>
<BottomInfo/> <BottomInfo/>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save