feat: 优化菜单,添加 menuArrowIconNoTransition 全局配置

This commit is contained in:
xiaoxian521 2022-11-16 11:59:59 +08:00
parent 3984ab19c9
commit 6e48ad79a7
7 changed files with 37 additions and 27 deletions

View File

@ -35,7 +35,7 @@
"@pureadmin/components": "^1.1.0",
"@pureadmin/descriptions": "^1.1.0",
"@pureadmin/table": "^1.2.0",
"@pureadmin/utils": "^1.2.1",
"@pureadmin/utils": "^1.6.5",
"@vueuse/core": "^9.5.0",
"@vueuse/motion": "2.0.0-beta.12",
"@wangeditor/editor": "^5.1.21",

View File

@ -22,7 +22,7 @@ specifiers:
"@pureadmin/descriptions": ^1.1.0
"@pureadmin/table": ^1.2.0
"@pureadmin/theme": ^2.4.0
"@pureadmin/utils": ^1.2.1
"@pureadmin/utils": ^1.6.5
"@types/element-resize-detector": 1.1.3
"@types/js-cookie": ^3.0.1
"@types/lodash": ^4.14.180
@ -133,7 +133,7 @@ dependencies:
"@pureadmin/components": 1.1.0_vue@3.2.45
"@pureadmin/descriptions": 1.1.1_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/motion": 2.0.0-beta.12_vue@3.2.45
"@wangeditor/editor": 5.1.22
@ -1138,8 +1138,8 @@ packages:
vue-i18n:
optional: true
dependencies:
"@intlify/message-compiler": 9.3.0-beta.6
"@intlify/shared": 9.3.0-beta.6
"@intlify/message-compiler": 9.3.0-beta.7
"@intlify/shared": 9.3.0-beta.7
jsonc-eslint-parser: 1.4.1
source-map: 0.6.1
vue-i18n: 9.2.2_vue@3.2.45
@ -1177,14 +1177,14 @@ packages:
"@intlify/shared": 9.2.2
source-map: 0.6.1
/@intlify/message-compiler/9.3.0-beta.6:
/@intlify/message-compiler/9.3.0-beta.7:
resolution:
{
integrity: sha512-3PJqRJoqvFHExA9DCkf7fZYKbvYne1tYQ0fptJAhUOZsELarh8wr4aPLKWCkQSRuutdrtZ/n5CcPgJgUmVthDw==
integrity: sha512-70r2UNp6DyKtIM4FgYCwdSuBK7xqCx2rVSXLMFiDRQi8pwooBklmOuzA0j7Q8ffbwKlFUJEEr2xPHZz2TJ6NAw==
}
engines: { node: ">= 14" }
dependencies:
"@intlify/shared": 9.3.0-beta.6
"@intlify/shared": 9.3.0-beta.7
source-map: 0.6.1
dev: true
@ -1195,10 +1195,10 @@ packages:
}
engines: { node: ">= 14" }
/@intlify/shared/9.3.0-beta.6:
/@intlify/shared/9.3.0-beta.7:
resolution:
{
integrity: sha512-ITA1R4tvJYwZXT5x6QCSwxcwQ4dU52zrzVm/EUbgsp8oWzYS1xexBrxyNM80PSQudYvL2rvcZJKQ7yBh7b0LkQ==
integrity: sha512-weWqKXyv94rdPXbSFYvA4yIwLYDhzgIWfgrVQ6UYARobPFE3BN+woWmjlGmASTyXMzZtTsq21b0LCN9SHN8pxQ==
}
engines: { node: ">= 14" }
dev: true
@ -1222,7 +1222,7 @@ packages:
optional: true
dependencies:
"@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
debug: 4.3.4
fast-glob: 3.2.12
@ -1410,10 +1410,10 @@ packages:
string-hash: 1.1.3
dev: true
/@pureadmin/utils/1.2.1_aotapuqn7htzdjltsyimavekky:
/@pureadmin/utils/1.6.5_aotapuqn7htzdjltsyimavekky:
resolution:
{
integrity: sha512-qcuRwW2DoXHCblFcZcYVAypV12I2P5sw0fvBnLfREtQ3Zlx51y4z0hOByncBFrNc9vFc3CoNM9UYlzsIedNP9A==
integrity: sha512-FxMRtKFWxkAcWBqjiI9uxo/3EnObFwAegSXEim5VFrEHogG177skpRj+Z51jfCAdCdwimDrZUdkuEn5c2yqIOA==
}
peerDependencies:
dayjs: "*"

View File

@ -16,6 +16,7 @@
"EpThemeColor": "#409EFF",
"ShowLogo": true,
"ShowModel": "smart",
"menuArrowIconNoTransition": false,
"MapConfigure": {
"amapKey": "97b3248d1553172e81f168cf94ea667e",
"options": {

View File

@ -29,6 +29,10 @@ import Refresh from "@iconify-icons/ep/refresh";
import EditPen from "@iconify-icons/ep/edit-pen";
import Delete from "@iconify-icons/ep/delete";
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("menu", Menu);
addIcon("home-filled", HomeFilled);
@ -56,6 +60,10 @@ addIcon("refresh", Refresh);
addIcon("edits", EditPen);
addIcon("delete", Delete);
addIcon("more", More);
addIcon("ep-arrow-down", EpArrowDown);
addIcon("ep-arrow-up", ArrowUp);
addIcon("ep-arrow-right", ArrowRight);
addIcon("ep-arrow-left", ArrowLeft);
// remixicon
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";

View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import path from "path";
import { getConfig } from "@/config";
import { childrenType } from "../../types";
import { useNav } from "@/layout/hooks/useNav";
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);
// showTooltip
const hoverMenuMap = new WeakMap();
@ -212,7 +217,15 @@ function resolvePath(routePath) {
</el-menu-item>
</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>
<div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">
<component

View File

@ -40,16 +40,3 @@
.breadcrumb-leave-active {
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
View File

@ -110,6 +110,7 @@ declare global {
EpThemeColor?: string;
ShowLogo?: boolean;
ShowModel?: string;
menuArrowIconNoTransition?: boolean;
MapConfigure?: {
amapKey?: string;
options: {