[update] 自定义菜单图标收回菜单文字隐藏

This commit is contained in:
zhaoxiao
2021-09-15 11:59:01 +08:00
parent 0ff1bd6344
commit c259b6cac5
+51 -44
View File
@@ -3,65 +3,65 @@
<template v-if="layoutMode === 'sidemenu'"> <template v-if="layoutMode === 'sidemenu'">
<a-drawer <a-drawer
v-if="device === 'mobile'" v-if="device === 'mobile'"
:wrapClassName="'drawer-sider ' + navTheme" :wrapClassName="'drawer-sider ' + navTheme"
placement="left" placement="left"
@close="() => this.collapsed = false" @close="() => this.collapsed = false"
:closable="false" :closable="false"
:visible="collapsed" :visible="collapsed"
width="200px" width="200px"
> >
<side-menu <side-menu
mode="inline" mode="inline"
v-if="device === 'mobile'" v-if="device === 'mobile'"
:menus="menus" :menus="menus"
@menuSelect="menuSelect" @menuSelect="menuSelect"
:theme="navTheme" :theme="navTheme"
:collapsed="false" :collapsed="false"
:collapsible="true"></side-menu> :collapsible="true"></side-menu>
</a-drawer> </a-drawer>
<side-menu <side-menu
v-show="device === 'desktop'" v-show="device === 'desktop'"
mode="inline" mode="inline"
:menus="menus" :menus="menus"
@menuSelect="myMenuSelect" @menuSelect="myMenuSelect"
:theme="navTheme" :theme="navTheme"
:collapsed="collapsed" :collapsed="collapsed"
:collapsible="true"></side-menu> :collapsible="true"></side-menu>
</template> </template>
<!-- 下次优化这些代码 --> <!-- 下次优化这些代码 -->
<template v-else> <template v-else>
<a-drawer <a-drawer
v-if="device === 'mobile'" v-if="device === 'mobile'"
:wrapClassName="'drawer-sider ' + navTheme" :wrapClassName="'drawer-sider ' + navTheme"
placement="left" placement="left"
@close="() => this.collapsed = false" @close="() => this.collapsed = false"
:closable="false" :closable="false"
:visible="collapsed" :visible="collapsed"
width="200px" width="200px"
> >
<side-menu <side-menu
mode="inline" mode="inline"
:menus="menus" :menus="menus"
@menuSelect="menuSelect" @menuSelect="menuSelect"
:theme="navTheme" :theme="navTheme"
:collapsed="false" :collapsed="false"
:collapsible="true"></side-menu> :collapsible="true"></side-menu>
</a-drawer> </a-drawer>
</template> </template>
<a-layout <a-layout
:class="[layoutMode, `content-width-${contentWidth}`]" :class="[layoutMode, `content-width-${contentWidth}`]"
:style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }"> :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
<!-- layout header --> <!-- layout header -->
<global-header <global-header
:mode="layoutMode" :mode="layoutMode"
:menus="menus" :menus="menus"
:theme="navTheme" :theme="navTheme"
:collapsed="collapsed" :collapsed="collapsed"
:device="device" :device="device"
@toggle="toggle" @toggle="toggle"
/> />
<!-- layout content --> <!-- layout content -->
@@ -626,7 +626,6 @@ body {
border-right-color: transparent; border-right-color: transparent;
} }
} }
} }
// 外置的样式控制 // 外置的样式控制
@@ -694,7 +693,6 @@ body {
} }
.content { .content {
.table-operator { .table-operator {
margin-bottom: 18px; margin-bottom: 18px;
@@ -703,4 +701,13 @@ body {
} }
} }
} }
// 自定义图标收小隐藏文字
.ant-menu-inline-collapsed {
.anticon-jeecg + span {
opacity: 0!important;
}
}
</style> </style>