|
@ -4,7 +4,8 @@ import { PropType, ref, nextTick, getCurrentInstance } from "vue"; |
|
|
import { childrenType } from "../../types"; |
|
|
import { childrenType } from "../../types"; |
|
|
import { useAppStoreHook } from "/@/store/modules/app"; |
|
|
import { useAppStoreHook } from "/@/store/modules/app"; |
|
|
import Icon from "/@/components/ReIcon/src/Icon.vue"; |
|
|
import Icon from "/@/components/ReIcon/src/Icon.vue"; |
|
|
|
|
|
|
|
|
|
|
|
import { transformI18n } from "/@/utils/i18n"; |
|
|
|
|
|
import { findIconReg } from "/@/components/ReIcon"; |
|
|
const instance = getCurrentInstance().appContext.app.config.globalProperties; |
|
|
const instance = getCurrentInstance().appContext.app.config.globalProperties; |
|
|
const menuMode = instance.$storage.layout?.layout === "vertical"; |
|
|
const menuMode = instance.$storage.layout?.layout === "vertical"; |
|
|
const pureApp = useAppStoreHook(); |
|
|
const pureApp = useAppStoreHook(); |
|
@ -92,7 +93,10 @@ function resolvePath(routePath) { |
|
|
<el-icon v-show="props.item.meta.icon"> |
|
|
<el-icon v-show="props.item.meta.icon"> |
|
|
<component |
|
|
<component |
|
|
:is=" |
|
|
:is=" |
|
|
onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon) |
|
|
|
|
|
|
|
|
findIconReg( |
|
|
|
|
|
onlyOneChild.meta.icon || |
|
|
|
|
|
(props.item.meta && props.item.meta.icon) |
|
|
|
|
|
) |
|
|
" |
|
|
" |
|
|
></component> |
|
|
></component> |
|
|
</el-icon> |
|
|
</el-icon> |
|
@ -106,14 +110,20 @@ function resolvePath(routePath) { |
|
|
overflow: 'hidden' |
|
|
overflow: 'hidden' |
|
|
}" |
|
|
}" |
|
|
> |
|
|
> |
|
|
<span v-if="!menuMode">{{ $t(onlyOneChild.meta.title) }}</span> |
|
|
|
|
|
|
|
|
<span v-if="!menuMode">{{ |
|
|
|
|
|
transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n) |
|
|
|
|
|
}}</span> |
|
|
<el-tooltip |
|
|
<el-tooltip |
|
|
v-else |
|
|
v-else |
|
|
placement="top" |
|
|
placement="top" |
|
|
:offset="-10" |
|
|
:offset="-10" |
|
|
:disabled="!onlyOneChild.showTooltip" |
|
|
:disabled="!onlyOneChild.showTooltip" |
|
|
> |
|
|
> |
|
|
<template #content> {{ $t(onlyOneChild.meta.title) }} </template> |
|
|
|
|
|
|
|
|
<template #content> |
|
|
|
|
|
{{ |
|
|
|
|
|
transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n) |
|
|
|
|
|
}} |
|
|
|
|
|
</template> |
|
|
<span |
|
|
<span |
|
|
ref="menuTextRef" |
|
|
ref="menuTextRef" |
|
|
:style="{ |
|
|
:style="{ |
|
@ -123,7 +133,9 @@ function resolvePath(routePath) { |
|
|
}" |
|
|
}" |
|
|
@mouseover="hoverMenu(onlyOneChild)" |
|
|
@mouseover="hoverMenu(onlyOneChild)" |
|
|
> |
|
|
> |
|
|
{{ $t(onlyOneChild.meta.title) }} |
|
|
|
|
|
|
|
|
{{ |
|
|
|
|
|
transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n) |
|
|
|
|
|
}} |
|
|
</span> |
|
|
</span> |
|
|
</el-tooltip> |
|
|
</el-tooltip> |
|
|
<Icon |
|
|
<Icon |
|
@ -144,16 +156,22 @@ function resolvePath(routePath) { |
|
|
> |
|
|
> |
|
|
<template #title> |
|
|
<template #title> |
|
|
<el-icon v-show="props.item.meta.icon" :class="props.item.meta.icon"> |
|
|
<el-icon v-show="props.item.meta.icon" :class="props.item.meta.icon"> |
|
|
<component :is="props.item.meta && props.item.meta.icon"></component> |
|
|
|
|
|
|
|
|
<component |
|
|
|
|
|
:is="findIconReg(props.item.meta && props.item.meta.icon)" |
|
|
|
|
|
></component> |
|
|
</el-icon> |
|
|
</el-icon> |
|
|
<span v-if="!menuMode">{{ $t(props.item.meta.title) }}</span> |
|
|
|
|
|
|
|
|
<span v-if="!menuMode">{{ |
|
|
|
|
|
transformI18n(props.item.meta.title, props.item.meta.i18n) |
|
|
|
|
|
}}</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="!pureApp.sidebar.opened || !props.item.showTooltip" |
|
|
> |
|
|
> |
|
|
<template #content> {{ $t(props.item.meta.title) }} </template> |
|
|
|
|
|
|
|
|
<template #content> |
|
|
|
|
|
{{ transformI18n(props.item.meta.title, props.item.meta.i18n) }} |
|
|
|
|
|
</template> |
|
|
<div |
|
|
<div |
|
|
ref="menuTextRef" |
|
|
ref="menuTextRef" |
|
|
:style="{ |
|
|
:style="{ |
|
@ -165,7 +183,7 @@ function resolvePath(routePath) { |
|
|
@mouseover="hoverMenu(props.item)" |
|
|
@mouseover="hoverMenu(props.item)" |
|
|
> |
|
|
> |
|
|
<span style="overflow: hidden; text-overflow: ellipsis"> |
|
|
<span style="overflow: hidden; text-overflow: ellipsis"> |
|
|
{{ $t(props.item.meta.title) }} |
|
|
|
|
|
|
|
|
{{ transformI18n(props.item.meta.title, props.item.meta.i18n) }} |
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</el-tooltip> |
|
|
</el-tooltip> |
|
|