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">
|
<script setup lang="ts">
|
||||||
import path from "path";
|
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 { childrenType } from "../../types";
|
||||||
import Icon from "/@/components/ReIcon/src/Icon.vue";
|
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({
|
const props = defineProps({
|
||||||
item: {
|
item: {
|
||||||
@ -19,6 +24,28 @@ const props = defineProps({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const onlyOneChild: childrenType = ref(null);
|
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(
|
function hasOneShowingChild(
|
||||||
children: childrenType[] = [],
|
children: childrenType[] = [],
|
||||||
@ -64,8 +91,23 @@ function resolvePath(routePath) {
|
|||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center; overflow: hidden">
|
||||||
<span>{{ $t(onlyOneChild.meta.title) }}</span>
|
<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
|
<Icon
|
||||||
v-if="onlyOneChild.meta.extraIcon"
|
v-if="onlyOneChild.meta.extraIcon"
|
||||||
:svg="onlyOneChild.meta.extraIcon.svg ? true : false"
|
:svg="onlyOneChild.meta.extraIcon.svg ? true : false"
|
||||||
@ -84,7 +126,28 @@ function resolvePath(routePath) {
|
|||||||
>
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
<i v-show="props.item.meta.icon" :class="props.item.meta.icon"></i>
|
<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
|
<Icon
|
||||||
v-if="props.item.meta.extraIcon"
|
v-if="props.item.meta.extraIcon"
|
||||||
:svg="props.item.meta.extraIcon.svg ? true : false"
|
:svg="props.item.meta.extraIcon.svg ? true : false"
|
||||||
|
@ -62,4 +62,5 @@ export type childrenType = {
|
|||||||
name?: string;
|
name?: string;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
showTooltip?: boolean;
|
||||||
};
|
};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user