提交 e8d92eae 编写于 作者: Mosher's avatar Mosher

修改应用菜单缩进样式

上级 ff10a14e
......@@ -2,7 +2,7 @@
<div class="app-menu-item">
<template v-for="item in menus">
<template v-if="item.items && Array.isArray(item.items) && item.items.length > 0">
<el-submenu v-show="!item.hidden" :index="item.name" :popper-class="popperClass" :key="item.id">
<el-submenu :class="{'isCollpase' : appMenuCollapseFlag}" v-show="!item.hidden" :index="item.name" :popper-class="popperClass" :key="item.id">
<template slot='title'>
<template v-if="item.icon && item.icon != ''">
<img :src="item.icon" class='app-menu-icon' />
......@@ -13,25 +13,28 @@
<template v-else>
<i v-if="isFirst" class='fa fa-cogs app-menu-icon'></i>
</template>
<span class='text' :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
<span ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
</template>
<app-menu-item :menus="item.items" :ctrlName="ctrlName" :isFirst="false" :counterdata="counterdata" :popperclass="popperClass"></app-menu-item>
<app-menu-item :isCollapse="isCollapse" :menus="item.items" :ctrlName="ctrlName" :isFirst="false" :counterdata="counterdata" :popper-class="popperClass"></app-menu-item>
</el-submenu>
</template>
<template v-else>
<template v-if="item.type =='MENUITEM'">
<el-menu-item v-show="!item.hidden" :index="item.name" :key="item.id">
<el-menu-item :class="{'isFirst' : isFirst}" v-show="!item.hidden" :index="item.name" :key="item.id">
<template v-if="item.icon && item.icon != ''">
<img :src="item.icon" class='app-menu-icon' />
<span v-if="isCollapse" ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
</template>
<template v-else-if="item.iconcls && item.iconcls != ''">
<i :class="[item.iconcls, 'app-menu-icon']"></i>
<span v-if="isCollapse" ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
</template>
<template v-else>
<i v-if="isFirst" class='fa fa-cogs app-menu-icon'></i>
<span v-if="isCollapse" ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
</template>
<template slot="title">
<span class="text" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
<span ref="circleText" :class="{'app-menu-circle' : appMenuCollapseFlag, 'text' : true}" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
<template v-if="counterdata && counterdata[item.counterid] && counterdata[item.counterid] > 0">
<span class="pull-right">
<badge :count="counterdata[item.counterid]" :overflow-count="9999"></badge>
......@@ -94,5 +97,47 @@ export default class AppMenuItem extends Vue {
*/
@Prop() public isFirst!: boolean;
/**
* 菜单是否缩进
*
* @type {*}
* @memberof AppMenuItem
*/
@Prop() public isCollapse!: boolean;
/**
* 菜单缩进,元素类名标记
*
* @type {*}
* @memberof AppMenuItem
*/
public appMenuCollapseFlag: boolean = false;
/**
* vue 生命周期
*
* @memberof AppIndexViewBase
*/
public mounted() {
this.onCollapsechangeChange();
}
/**
* 根据菜单缩进状态修改菜单项值
*/
onCollapsechangeChange() {
if(this.isCollapse && this.isFirst) {
this.appMenuCollapseFlag = true;
let appMenuCircle: any[] = this.$refs.circleText as any[];
if(appMenuCircle) {
appMenuCircle.forEach((item: any) => {
let text: string = (item.innerText as string).slice(0,1);
item.innerText = text;
})
}
}
}
}
</script>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册