You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
5.4 KiB
155 lines
5.4 KiB
<template>
|
|
<div class="menu-mod">
|
|
<!-- 如果 expandMenu 包含子菜单项 (list) -->
|
|
<div v-if="expandMenu.list">
|
|
<!-- 使用 el-sub-menu 创建一个可展开的菜单项 -->
|
|
<el-sub-menu
|
|
v-if="!item.hidden"
|
|
:index="expandMenu.menuId + ''"
|
|
>
|
|
<template #title>
|
|
<!-- 菜单项标题 -->
|
|
<span
|
|
style="font-size: 14px"
|
|
:title="expandMenu.name.length > 4 ? expandMenu.name : ''"
|
|
>{{ expandMenu.name }}</span>
|
|
</template>
|
|
|
|
<!-- 使用 el-menu-item-group 包装子菜单项 -->
|
|
<el-menu-item-group class="menu-right-el-item">
|
|
<template v-for="menu in expandMenu.list"> <!-- 遍历子菜单列表 -->
|
|
<!-- 每个子菜单项 -->
|
|
<el-menu-item
|
|
v-if="!menu.hidden"
|
|
:key="menu.menuId"
|
|
style="
|
|
font-size: 14px !important; <!-- 设置字体大小为 14px -->
|
|
line-height: 40px;
|
|
padding-left: 30px !important; <!-- 设置左侧内边距为 30px -->
|
|
padding-right: 10px !important; <!-- 设置右侧内边距为 10px -->
|
|
"
|
|
class="menu-right-el-item is-active item-text"
|
|
:class="{ 'menu-active': selectRightId === menu.menuId }"
|
|
@click="gotoRouteHandle(menu)"
|
|
>
|
|
<span :title="menu.name.length > 4 ? menu.name : ''">{{ menu.name }}</span> <!-- 显示子菜单名称 -->
|
|
<!-- 如果子菜单还有子菜单，则递归渲染 SubMenuItem 组件 -->
|
|
<SubMenuItem
|
|
v-if="menu.list"
|
|
:expand-menu="menu"
|
|
/>
|
|
</el-menu-item>
|
|
</template>
|
|
</el-menu-item-group>
|
|
</el-sub-menu>
|
|
</div>
|
|
|
|
<!-- 如果 expandMenu 没有子菜单项 (list) -->
|
|
<div v-else>
|
|
<!-- 使用 el-menu-item 创建一个不可展开的菜单项 -->
|
|
<el-menu-item
|
|
v-if="!expandMenu.hidden"
|
|
:key="expandMenu.menuId"
|
|
style="font-size: 14px !important; padding-left: 15px !important; line-height: 40px"
|
|
class="menu-right-el-item is-active item-text"
|
|
:class="{ 'menu-active': selectRightId === expandMenu.menuId }"
|
|
@click="gotoRouteHandle(expandMenu)"
|
|
>
|
|
<span :title="expandMenu.name.length > 4 ? expandMenu.name : ''">{{ expandMenu.name }}</span> <!-- 显示菜单名称 -->
|
|
</el-menu-item>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 导入子菜单项组件
|
|
import SubMenuItem from './main-sidebar-sub-menu-item.vue'
|
|
|
|
// 定义组件接收的属性 (props)
|
|
const props = defineProps({
|
|
expandMenu: {
|
|
type: Object, // 属性类型为对象
|
|
default: () => ({}) // 如果没有传递此属性，则默认为空对象
|
|
},
|
|
menuIndex: {
|
|
type: String, // 属性类型为字符串
|
|
default: '' // 如果没有传递此属性，则默认为空字符串
|
|
}
|
|
})
|
|
|
|
// 使用 ref 创建响应式数据，初始化为 props.expandMenu 的值
|
|
const item = ref(props.expandMenu)
|
|
|
|
// 初始化 Vuex store 实例
|
|
const commonStore = useCommonStore()
|
|
|
|
// 计算属性：获取当前选中的右侧菜单项 ID
|
|
const selectRightId = computed(() => commonStore.selectRightId)
|
|
|
|
// 初始化 Vue Router 实例
|
|
const router = useRouter()
|
|
|
|
// 监听路由变化，当路由发生变化时调用 routeHandle 函数处理
|
|
watch(
|
|
() => router.currentRoute.value, // 监听当前路由的变化
|
|
route => {
|
|
routeHandle(route) // 路由变化时调用 routeHandle 处理逻辑
|
|
}
|
|
)
|
|
|
|
// 路由操作函数
|
|
const routeHandle = route => {
|
|
if (route.meta.isTab) { // 检查路由元信息中是否有 isTab 标记
|
|
commonStore.updateSelectRightId(route.meta.menuId || '') // 更新选中的右侧菜单项 ID
|
|
}
|
|
}
|
|
|
|
// 通过 menuId 与动态(菜单)路由进行匹配跳转至指定路由
|
|
const gotoRouteHandle = menu => {
|
|
if (router.currentRoute.value.name === menu.url) { // 如果当前路由已经是目标路由，则不执行跳转
|
|
return
|
|
}
|
|
router.push({ name: menu.url }) // 否则，导航到指定路由
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.menu-mod {
|
|
/* 定义右侧菜单项的基本样式 */
|
|
.menu-right-el-item {
|
|
/* 当菜单项处于激活状态时的样式 */
|
|
&.is-active {
|
|
background-color: #ffffff; /* 背景颜色为白色 */
|
|
color: #333; /* 文本颜色为深灰色 */
|
|
}
|
|
|
|
/* 自定义激活状态下的样式 */
|
|
&.menu-active {
|
|
background-color: #e7eefb; /* 背景颜色为浅蓝色 */
|
|
color: #155bd4; /* 文本颜色为蓝色 */
|
|
}
|
|
|
|
/* 修改 el-menu-item-group 组件中标题的内边距 */
|
|
:deep(.el-menu-item-group__title) {
|
|
padding: 0; /* 移除默认内边距 */
|
|
}
|
|
}
|
|
|
|
/* 定义子菜单标题的样式 */
|
|
div .el-sub-menu__title span {
|
|
display: inline-block; /* 设置为行内块元素 */
|
|
width: 85px; /* 固定宽度为 85px */
|
|
font-size: 14px; /* 字体大小为 14px */
|
|
overflow: hidden; /* 隐藏溢出的内容 */
|
|
text-overflow: ellipsis; /* 溢出部分用省略号表示 */
|
|
white-space: nowrap; /* 强制在同一行显示 */
|
|
}
|
|
|
|
/* 定义子菜单项中的文本样式 */
|
|
.el-sub-menu .menu-right-el-item.el-menu-item span {
|
|
overflow: hidden; /* 隐藏溢出的内容 */
|
|
text-overflow: ellipsis; /* 溢出部分用省略号表示 */
|
|
white-space: nowrap; /* 强制在同一行显示 */
|
|
}
|
|
}
|
|
</style>
|