admin/jdcProject_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 左侧导航菜单 title 过长自动省略

Browse Source
This commit is contained in:
pany 2024-11-21 11:28:37 +08:00
parent b8033dc892
commit 3155c086ca
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/layouts/components/Sidebar/SidebarItem.vue
View File

@ -60,7 +60,7 @@ function resolvePath(routePath: string) {
<SvgIcon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" /> <SvgIcon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" />
<component v-else-if="theOnlyOneChild.meta.elIcon" :is="theOnlyOneChild.meta.elIcon" class="el-icon" /> <component v-else-if="theOnlyOneChild.meta.elIcon" :is="theOnlyOneChild.meta.elIcon" class="el-icon" />
<template v-if="theOnlyOneChild.meta.title" #title> <template v-if="theOnlyOneChild.meta.title" #title>
{{ theOnlyOneChild.meta.title }} <span class="title">{{ theOnlyOneChild.meta.title }}</span>
</template> </template>
</el-menu-item> </el-menu-item>
</SidebarItemLink> </SidebarItemLink>
@ -69,7 +69,7 @@ function resolvePath(routePath: string) {
<template #title> <template #title>
<SvgIcon v-if="props.item.meta?.svgIcon" :name="props.item.meta.svgIcon" /> <SvgIcon v-if="props.item.meta?.svgIcon" :name="props.item.meta.svgIcon" />
<component v-else-if="props.item.meta?.elIcon" :is="props.item.meta.elIcon" class="el-icon" /> <component v-else-if="props.item.meta?.elIcon" :is="props.item.meta.elIcon" class="el-icon" />
<span v-if="props.item.meta?.title">{{ props.item.meta.title }}</span> <span v-if="props.item.meta?.title" class="title">{{ props.item.meta.title }}</span>
</template> </template>
<template v-if="props.item.children"> <template v-if="props.item.children">
<SidebarItem <SidebarItem
@ -83,6 +83,8 @@ function resolvePath(routePath: string) {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/styles/mixins.scss";
.svg-icon { .svg-icon {
min-width: 1em; min-width: 1em;
margin-right: 12px; margin-right: 12px;
@ -94,4 +96,8 @@ function resolvePath(routePath: string) {
margin-right: 12px !important; margin-right: 12px !important;
font-size: 18px; font-size: 18px;
} }
.title {
@extend %ellipsis;
}
</style> </style>