twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-30 09:24:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 当没有icon时，垂直导航菜单折叠文字被隐藏

Browse Source
This commit is contained in:
xiaoxian521 2022-08-19 09:44:58 +08:00
parent 035ac47b39
commit ca10d104c0
1 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/layout/components/sidebar/sidebarItem.vue
View File

@ -3,12 +3,10 @@ import path from "path";
import { childrenType } from "../../types"; import { childrenType } from "../../types";
import { useNav } from "/@/layout/hooks/useNav"; import { useNav } from "/@/layout/hooks/useNav";
import { transformI18n } from "/@/plugins/i18n"; import { transformI18n } from "/@/plugins/i18n";
import { useAppStoreHook } from "/@/store/modules/app";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"; import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue"; import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";
const { pureApp } = useNav(); const { layout, isCollapse } = useNav();
const menuMode = ["vertical", "mix"].includes(pureApp.layout);
const props = defineProps({ const props = defineProps({
item: { item: {
@ -25,7 +23,7 @@ const props = defineProps({
}); });
const getExtraIconStyle = computed((): CSSProperties => { const getExtraIconStyle = computed((): CSSProperties => {
if (useAppStoreHook().getSidebarStatus) { if (!isCollapse.value) {
return { return {
position: "absolute", position: "absolute",
right: "10px" right: "10px"
@ -46,7 +44,7 @@ const getNoDropdownStyle = computed((): CSSProperties => {
const getDivStyle = computed((): CSSProperties => { const getDivStyle = computed((): CSSProperties => {
return { return {
width: pureApp.sidebar.opened ? "" : "100%", width: !isCollapse.value ? "" : "100%",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
@ -64,7 +62,7 @@ const getMenuTextStyle = computed(() => {
const getSubTextStyle = computed((): CSSProperties => { const getSubTextStyle = computed((): CSSProperties => {
return { return {
width: pureApp.sidebar.opened ? "210px" : "", width: !isCollapse.value ? "210px" : "",
display: "inline-block", display: "inline-block",
overflow: "hidden", overflow: "hidden",
textOverflow: "ellipsis" textOverflow: "ellipsis"
@ -159,9 +157,19 @@ function resolvePath(routePath) {
</div> </div>
<div <div
v-if=" v-if="
!pureApp.sidebar.opened && isCollapse &&
pureApp.layout === 'mix' && layout === 'vertical' &&
props.item?.pathList?.length === 2 props.item?.pathList?.length === 1
"
:style="getDivStyle"
>
<span :style="getMenuTextStyle">
{{ transformI18n(onlyOneChild.meta.title) }}
</span>
</div>
<div
v-if="
isCollapse && layout === 'mix' && props.item?.pathList?.length === 2
" "
:style="getDivStyle" :style="getDivStyle"
> >
@ -171,7 +179,7 @@ function resolvePath(routePath) {
</div> </div>
<template #title> <template #title>
<div :style="getDivStyle"> <div :style="getDivStyle">
<span v-if="!menuMode"> <span v-if="layout === 'horizontal'">
{{ transformI18n(onlyOneChild.meta.title) }} {{ transformI18n(onlyOneChild.meta.title) }}
</span> </span>
<el-tooltip <el-tooltip
@ -211,12 +219,14 @@ function resolvePath(routePath) {
:is="useRenderIcon(props.item.meta && toRaw(props.item.meta.icon))" :is="useRenderIcon(props.item.meta && toRaw(props.item.meta.icon))"
/> />
</div> </div>
<span v-if="!menuMode"> {{ transformI18n(props.item.meta.title) }}</span> <span v-if="layout === 'horizontal'">
{{ transformI18n(props.item.meta.title) }}
</span>
<el-tooltip <el-tooltip
v-else v-else
placement="top" placement="top"
:offset="-10" :offset="-10"
:disabled="!pureApp.sidebar.opened || !props.item.showTooltip" :disabled="!isCollapse || !props.item.showTooltip"
> >
<template #content> <template #content>
{{ transformI18n(props.item.meta.title) }} {{ transformI18n(props.item.meta.title) }}