style(sidebar): 优化侧边菜单样式与标识逻辑
1. 移除原有二级菜单叶子节点的小圆点样式 2. 新增子菜单标识图标组件,为有子级的菜单添加折叠箭头标识 3. 调整菜单标题渲染逻辑,统一标题样式处理 4. 修复菜单容器的定位样式问题
This commit is contained in:
@@ -93,6 +93,7 @@
|
||||
// 明确默认状态样式(关键修复)
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
position: relative;
|
||||
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
@@ -305,15 +306,16 @@
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
// 二级菜单叶子页面小圆点
|
||||
.el-menu-item.is-page-item::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--current-color, #409EFF);
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// 子菜单标识图标
|
||||
.submenu-indicator {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
opacity: 0.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// 叶子页面无标识
|
||||
@@ -10,10 +10,14 @@ export default {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
hasChildren: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
render(h, context) {
|
||||
const { icon, title } = context.props
|
||||
const { icon, title, hasChildren } = context.props
|
||||
const vnodes = []
|
||||
|
||||
if (icon) {
|
||||
@@ -21,12 +25,21 @@ export default {
|
||||
}
|
||||
|
||||
if (title) {
|
||||
if (title.length > 5) {
|
||||
vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
|
||||
} else {
|
||||
vnodes.push(<span slot='title'>{(title)}</span>)
|
||||
}
|
||||
vnodes.push(
|
||||
<span slot='title' class="menu-title">
|
||||
{title}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
if (hasChildren) {
|
||||
vnodes.push(
|
||||
<span class="submenu-indicator">
|
||||
<svg-icon icon-class="nested" />
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return vnodes
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
<template v-if="hasVisibleChild">
|
||||
<app-link :to="subMenuRoute">
|
||||
<el-menu-item :index="basePath" :class="{'submenu-title-noDropdown':!isNest}">
|
||||
<item :icon="item.meta && item.meta.icon" :title="item.meta && item.meta.title" />
|
||||
<item :icon="item.meta && item.meta.icon" :title="item.meta && item.meta.title" :has-children="true" />
|
||||
</el-menu-item>
|
||||
</app-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
<app-link :to="selfRoute">
|
||||
<el-menu-item :index="basePath" :class="{'submenu-title-noDropdown':!isNest, 'is-page-item': true}">
|
||||
<el-menu-item :index="basePath" :class="{'submenu-title-noDropdown':!isNest}">
|
||||
<item :icon="item.meta && item.meta.icon" :title="item.meta && item.meta.title" />
|
||||
</el-menu-item>
|
||||
</app-link>
|
||||
|
||||
Reference in New Issue
Block a user