mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-30 09:24:46 +08:00
parent
3389f3118a
commit
ae72cccbb9
@ -1,8 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import path from "path";
|
||||
import { PropType, ref } from "vue";
|
||||
import { storageLocal } from "/@/utils/storage";
|
||||
import { PropType, ref, nextTick } from "vue";
|
||||
import { childrenType } from "../../types";
|
||||
import Icon from "/@/components/ReIcon/src/Icon.vue";
|
||||
const layout = ref(
|
||||
storageLocal.getItem("responsive-layout") || "vertical-dark"
|
||||
);
|
||||
const menuMode = layout.value.layout.split("-")[0] === "vertical";
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
@ -19,6 +24,28 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const onlyOneChild: childrenType = ref(null);
|
||||
// 存放菜单是否存在showTooltip属性标识
|
||||
const hoverMenuMap = new WeakMap();
|
||||
// 存储菜单文本dom元素
|
||||
const menuTextRef = ref(null);
|
||||
|
||||
function hoverMenu(key) {
|
||||
// 如果当前菜单showTooltip属性已存在,退出计算
|
||||
if (hoverMenuMap.get(key)) return;
|
||||
|
||||
nextTick(() => {
|
||||
// 如果文本内容的整体宽度大于其可视宽度,则文本溢出
|
||||
menuTextRef.value?.scrollWidth > menuTextRef.value?.clientWidth
|
||||
? Object.assign(key, {
|
||||
showTooltip: true
|
||||
})
|
||||
: Object.assign(key, {
|
||||
showTooltip: false
|
||||
});
|
||||
|
||||
hoverMenuMap.set(key, true);
|
||||
});
|
||||
}
|
||||
|
||||
function hasOneShowingChild(
|
||||
children: childrenType[] = [],
|
||||
@ -64,8 +91,23 @@ function resolvePath(routePath) {
|
||||
"
|
||||
/>
|
||||
<template #title>
|
||||
<div style="display: flex; align-items: center">
|
||||
<span>{{ $t(onlyOneChild.meta.title) }}</span>
|
||||
<div style="display: flex; align-items: center; overflow: hidden">
|
||||
<span v-if="!menuMode">{{ $t(onlyOneChild.meta.title) }}</span>
|
||||
<el-tooltip
|
||||
v-else
|
||||
placement="top"
|
||||
:offset="-10"
|
||||
:disabled="!onlyOneChild.showTooltip"
|
||||
>
|
||||
<template #content> {{ $t(onlyOneChild.meta.title) }} </template>
|
||||
<span
|
||||
ref="menuTextRef"
|
||||
style="overflow: hidden; text-overflow: ellipsis"
|
||||
@mouseover="hoverMenu(onlyOneChild)"
|
||||
>
|
||||
{{ $t(onlyOneChild.meta.title) }}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<Icon
|
||||
v-if="onlyOneChild.meta.extraIcon"
|
||||
:svg="onlyOneChild.meta.extraIcon.svg ? true : false"
|
||||
@ -84,7 +126,28 @@ function resolvePath(routePath) {
|
||||
>
|
||||
<template #title>
|
||||
<i v-show="props.item.meta.icon" :class="props.item.meta.icon"></i>
|
||||
<span>{{ $t(props.item.meta.title) }}</span>
|
||||
<span v-if="!menuMode">{{ $t(props.item.meta.title) }}</span>
|
||||
|
||||
<el-tooltip
|
||||
v-else
|
||||
placement="top"
|
||||
:offset="-10"
|
||||
:disabled="!props.item.showTooltip"
|
||||
>
|
||||
<template #content> {{ $t(props.item.meta.title) }} </template>
|
||||
<div
|
||||
ref="menuTextRef"
|
||||
style="
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 125px;
|
||||
"
|
||||
@mouseover="hoverMenu(props.item)"
|
||||
>
|
||||
{{ $t(props.item.meta.title) }}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<Icon
|
||||
v-if="props.item.meta.extraIcon"
|
||||
:svg="props.item.meta.extraIcon.svg ? true : false"
|
||||
|
@ -62,4 +62,5 @@ export type childrenType = {
|
||||
name?: string;
|
||||
};
|
||||
};
|
||||
showTooltip?: boolean;
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user