mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
feat: 优化菜单,添加 menuArrowIconNoTransition
全局配置
This commit is contained in:
parent
3984ab19c9
commit
6e48ad79a7
@ -35,7 +35,7 @@
|
|||||||
"@pureadmin/components": "^1.1.0",
|
"@pureadmin/components": "^1.1.0",
|
||||||
"@pureadmin/descriptions": "^1.1.0",
|
"@pureadmin/descriptions": "^1.1.0",
|
||||||
"@pureadmin/table": "^1.2.0",
|
"@pureadmin/table": "^1.2.0",
|
||||||
"@pureadmin/utils": "^1.2.1",
|
"@pureadmin/utils": "^1.6.5",
|
||||||
"@vueuse/core": "^9.5.0",
|
"@vueuse/core": "^9.5.0",
|
||||||
"@vueuse/motion": "2.0.0-beta.12",
|
"@vueuse/motion": "2.0.0-beta.12",
|
||||||
"@wangeditor/editor": "^5.1.21",
|
"@wangeditor/editor": "^5.1.21",
|
||||||
|
24
pnpm-lock.yaml
generated
24
pnpm-lock.yaml
generated
@ -22,7 +22,7 @@ specifiers:
|
|||||||
"@pureadmin/descriptions": ^1.1.0
|
"@pureadmin/descriptions": ^1.1.0
|
||||||
"@pureadmin/table": ^1.2.0
|
"@pureadmin/table": ^1.2.0
|
||||||
"@pureadmin/theme": ^2.4.0
|
"@pureadmin/theme": ^2.4.0
|
||||||
"@pureadmin/utils": ^1.2.1
|
"@pureadmin/utils": ^1.6.5
|
||||||
"@types/element-resize-detector": 1.1.3
|
"@types/element-resize-detector": 1.1.3
|
||||||
"@types/js-cookie": ^3.0.1
|
"@types/js-cookie": ^3.0.1
|
||||||
"@types/lodash": ^4.14.180
|
"@types/lodash": ^4.14.180
|
||||||
@ -133,7 +133,7 @@ dependencies:
|
|||||||
"@pureadmin/components": 1.1.0_vue@3.2.45
|
"@pureadmin/components": 1.1.0_vue@3.2.45
|
||||||
"@pureadmin/descriptions": 1.1.1_element-plus@2.2.21
|
"@pureadmin/descriptions": 1.1.1_element-plus@2.2.21
|
||||||
"@pureadmin/table": 1.2.0_element-plus@2.2.21
|
"@pureadmin/table": 1.2.0_element-plus@2.2.21
|
||||||
"@pureadmin/utils": 1.2.1_aotapuqn7htzdjltsyimavekky
|
"@pureadmin/utils": 1.6.5_aotapuqn7htzdjltsyimavekky
|
||||||
"@vueuse/core": 9.5.0_vue@3.2.45
|
"@vueuse/core": 9.5.0_vue@3.2.45
|
||||||
"@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
|
"@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
|
||||||
"@wangeditor/editor": 5.1.22
|
"@wangeditor/editor": 5.1.22
|
||||||
@ -1138,8 +1138,8 @@ packages:
|
|||||||
vue-i18n:
|
vue-i18n:
|
||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
"@intlify/message-compiler": 9.3.0-beta.6
|
"@intlify/message-compiler": 9.3.0-beta.7
|
||||||
"@intlify/shared": 9.3.0-beta.6
|
"@intlify/shared": 9.3.0-beta.7
|
||||||
jsonc-eslint-parser: 1.4.1
|
jsonc-eslint-parser: 1.4.1
|
||||||
source-map: 0.6.1
|
source-map: 0.6.1
|
||||||
vue-i18n: 9.2.2_vue@3.2.45
|
vue-i18n: 9.2.2_vue@3.2.45
|
||||||
@ -1177,14 +1177,14 @@ packages:
|
|||||||
"@intlify/shared": 9.2.2
|
"@intlify/shared": 9.2.2
|
||||||
source-map: 0.6.1
|
source-map: 0.6.1
|
||||||
|
|
||||||
/@intlify/message-compiler/9.3.0-beta.6:
|
/@intlify/message-compiler/9.3.0-beta.7:
|
||||||
resolution:
|
resolution:
|
||||||
{
|
{
|
||||||
integrity: sha512-3PJqRJoqvFHExA9DCkf7fZYKbvYne1tYQ0fptJAhUOZsELarh8wr4aPLKWCkQSRuutdrtZ/n5CcPgJgUmVthDw==
|
integrity: sha512-70r2UNp6DyKtIM4FgYCwdSuBK7xqCx2rVSXLMFiDRQi8pwooBklmOuzA0j7Q8ffbwKlFUJEEr2xPHZz2TJ6NAw==
|
||||||
}
|
}
|
||||||
engines: { node: ">= 14" }
|
engines: { node: ">= 14" }
|
||||||
dependencies:
|
dependencies:
|
||||||
"@intlify/shared": 9.3.0-beta.6
|
"@intlify/shared": 9.3.0-beta.7
|
||||||
source-map: 0.6.1
|
source-map: 0.6.1
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
@ -1195,10 +1195,10 @@ packages:
|
|||||||
}
|
}
|
||||||
engines: { node: ">= 14" }
|
engines: { node: ">= 14" }
|
||||||
|
|
||||||
/@intlify/shared/9.3.0-beta.6:
|
/@intlify/shared/9.3.0-beta.7:
|
||||||
resolution:
|
resolution:
|
||||||
{
|
{
|
||||||
integrity: sha512-ITA1R4tvJYwZXT5x6QCSwxcwQ4dU52zrzVm/EUbgsp8oWzYS1xexBrxyNM80PSQudYvL2rvcZJKQ7yBh7b0LkQ==
|
integrity: sha512-weWqKXyv94rdPXbSFYvA4yIwLYDhzgIWfgrVQ6UYARobPFE3BN+woWmjlGmASTyXMzZtTsq21b0LCN9SHN8pxQ==
|
||||||
}
|
}
|
||||||
engines: { node: ">= 14" }
|
engines: { node: ">= 14" }
|
||||||
dev: true
|
dev: true
|
||||||
@ -1222,7 +1222,7 @@ packages:
|
|||||||
optional: true
|
optional: true
|
||||||
dependencies:
|
dependencies:
|
||||||
"@intlify/bundle-utils": 3.2.1_vue-i18n@9.2.2
|
"@intlify/bundle-utils": 3.2.1_vue-i18n@9.2.2
|
||||||
"@intlify/shared": 9.3.0-beta.6
|
"@intlify/shared": 9.3.0-beta.7
|
||||||
"@rollup/pluginutils": 4.2.1
|
"@rollup/pluginutils": 4.2.1
|
||||||
debug: 4.3.4
|
debug: 4.3.4
|
||||||
fast-glob: 3.2.12
|
fast-glob: 3.2.12
|
||||||
@ -1410,10 +1410,10 @@ packages:
|
|||||||
string-hash: 1.1.3
|
string-hash: 1.1.3
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@pureadmin/utils/1.2.1_aotapuqn7htzdjltsyimavekky:
|
/@pureadmin/utils/1.6.5_aotapuqn7htzdjltsyimavekky:
|
||||||
resolution:
|
resolution:
|
||||||
{
|
{
|
||||||
integrity: sha512-qcuRwW2DoXHCblFcZcYVAypV12I2P5sw0fvBnLfREtQ3Zlx51y4z0hOByncBFrNc9vFc3CoNM9UYlzsIedNP9A==
|
integrity: sha512-FxMRtKFWxkAcWBqjiI9uxo/3EnObFwAegSXEim5VFrEHogG177skpRj+Z51jfCAdCdwimDrZUdkuEn5c2yqIOA==
|
||||||
}
|
}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
dayjs: "*"
|
dayjs: "*"
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
"EpThemeColor": "#409EFF",
|
"EpThemeColor": "#409EFF",
|
||||||
"ShowLogo": true,
|
"ShowLogo": true,
|
||||||
"ShowModel": "smart",
|
"ShowModel": "smart",
|
||||||
|
"menuArrowIconNoTransition": false,
|
||||||
"MapConfigure": {
|
"MapConfigure": {
|
||||||
"amapKey": "97b3248d1553172e81f168cf94ea667e",
|
"amapKey": "97b3248d1553172e81f168cf94ea667e",
|
||||||
"options": {
|
"options": {
|
||||||
|
@ -29,6 +29,10 @@ import Refresh from "@iconify-icons/ep/refresh";
|
|||||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||||
import Delete from "@iconify-icons/ep/delete";
|
import Delete from "@iconify-icons/ep/delete";
|
||||||
import More from "@iconify-icons/ep/more-filled";
|
import More from "@iconify-icons/ep/more-filled";
|
||||||
|
import EpArrowDown from "@iconify-icons/ep/arrow-down";
|
||||||
|
import ArrowUp from "@iconify-icons/ep/arrow-up";
|
||||||
|
import ArrowRight from "@iconify-icons/ep/arrow-right";
|
||||||
|
import ArrowLeft from "@iconify-icons/ep/arrow-left";
|
||||||
addIcon("check", Check);
|
addIcon("check", Check);
|
||||||
addIcon("menu", Menu);
|
addIcon("menu", Menu);
|
||||||
addIcon("home-filled", HomeFilled);
|
addIcon("home-filled", HomeFilled);
|
||||||
@ -56,6 +60,10 @@ addIcon("refresh", Refresh);
|
|||||||
addIcon("edits", EditPen);
|
addIcon("edits", EditPen);
|
||||||
addIcon("delete", Delete);
|
addIcon("delete", Delete);
|
||||||
addIcon("more", More);
|
addIcon("more", More);
|
||||||
|
addIcon("ep-arrow-down", EpArrowDown);
|
||||||
|
addIcon("ep-arrow-up", ArrowUp);
|
||||||
|
addIcon("ep-arrow-right", ArrowRight);
|
||||||
|
addIcon("ep-arrow-left", ArrowLeft);
|
||||||
|
|
||||||
// remixicon
|
// remixicon
|
||||||
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
|
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import path from "path";
|
import path from "path";
|
||||||
|
import { getConfig } from "@/config";
|
||||||
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";
|
||||||
@ -76,6 +77,10 @@ const getSpanStyle = computed(() => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const expandCloseIcon = computed(() => {
|
||||||
|
return getConfig()?.menuArrowIconNoTransition ? "expand-close-icon" : "";
|
||||||
|
});
|
||||||
|
|
||||||
const onlyOneChild: childrenType = ref(null);
|
const onlyOneChild: childrenType = ref(null);
|
||||||
// 存放菜单是否存在showTooltip属性标识
|
// 存放菜单是否存在showTooltip属性标识
|
||||||
const hoverMenuMap = new WeakMap();
|
const hoverMenuMap = new WeakMap();
|
||||||
@ -212,7 +217,15 @@ function resolvePath(routePath) {
|
|||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<el-sub-menu v-else ref="subMenu" :index="resolvePath(props.item.path)">
|
<el-sub-menu
|
||||||
|
v-else
|
||||||
|
ref="subMenu"
|
||||||
|
:index="resolvePath(props.item.path)"
|
||||||
|
v-bind:[expandCloseIcon]="useRenderIcon('ep-arrow-down')"
|
||||||
|
:expand-open-icon="useRenderIcon('ep-arrow-up')"
|
||||||
|
:collapse-close-icon="useRenderIcon('ep-arrow-right')"
|
||||||
|
:collapse-open-icon="useRenderIcon('ep-arrow-left')"
|
||||||
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">
|
<div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">
|
||||||
<component
|
<component
|
||||||
|
@ -40,16 +40,3 @@
|
|||||||
.breadcrumb-leave-active {
|
.breadcrumb-leave-active {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 重置el-menu的展开收起动画时长
|
|
||||||
* @see {@link https://github.com/element-plus/element-plus/issues/4509#issuecomment-980165001}
|
|
||||||
*/
|
|
||||||
.outer-most .el-collapse-transition-leave-active,
|
|
||||||
.outer-most .el-collapse-transition-enter-active {
|
|
||||||
transition: 0.12s all ease-in-out !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.horizontal-collapse-transition {
|
|
||||||
transition: var(--pure-transition-duration) all !important;
|
|
||||||
}
|
|
||||||
|
1
types/global.d.ts
vendored
1
types/global.d.ts
vendored
@ -110,6 +110,7 @@ declare global {
|
|||||||
EpThemeColor?: string;
|
EpThemeColor?: string;
|
||||||
ShowLogo?: boolean;
|
ShowLogo?: boolean;
|
||||||
ShowModel?: string;
|
ShowModel?: string;
|
||||||
|
menuArrowIconNoTransition?: boolean;
|
||||||
MapConfigure?: {
|
MapConfigure?: {
|
||||||
amapKey?: string;
|
amapKey?: string;
|
||||||
options: {
|
options: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user