From e1023bb3313282b00d6dcdefd5d7e30d7aaa1bfc Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期四, 30 十一月 2023 11:13:29 +0800 Subject: [PATCH] update 优化 代码中存在的警告 --- src/layout/components/Sidebar/SidebarItem.vue | 167 ++++++++++++++++++++++++++++--------------------------- 1 files changed, 85 insertions(+), 82 deletions(-) diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue index 0c5831f..4459cdf 100644 --- a/src/layout/components/Sidebar/SidebarItem.vue +++ b/src/layout/components/Sidebar/SidebarItem.vue @@ -1,105 +1,108 @@ +<template> + <div v-if="!item.hidden"> + <template v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow"> + <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"> + <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }"> + <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" /> + <template #title> + <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span> + </template> + </el-menu-item> + </app-link> + </template> + + <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported> + <template v-if="item.meta" #title> + <svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> + <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span> + </template> + + <sidebar-item + v-for="(child, index) in item.children" + :key="child.path + index" + :is-nest="true" + :item="child" + :base-path="resolvePath(child.path)" + class="nest-menu" + /> + </el-sub-menu> + </div> +</template> + <script setup lang="ts"> import { isExternal } from '@/utils/validate' import AppLink from './Link.vue' import { getNormalPath } from '@/utils/ruoyi' import { RouteOption } from "vue-router"; -import { PropType } from "vue"; const props = defineProps({ - // route object - item: { - type: Object as PropType<RouteOption>, - required: true - }, - isNest: { - type: Boolean, - default: false - }, - basePath: { - type: String, - default: '' - } + // route object + item: { + type: Object as PropType<RouteOption>, + required: true + }, + isNest: { + type: Boolean, + default: false + }, + basePath: { + type: String, + default: '' + } }) const onlyOneChild = ref<any>({}); -const hasOneShowingChild = (children:RouteOption[] = [], parent: RouteOption) => { - if (!children) { - children = []; - } - const showingChildren = children.filter(item => { - if (item.hidden) { - return false - } else { - // Temp set(will be used if only has one showing child) - onlyOneChild.value = item - return true +const hasOneShowingChild = (parent: RouteOption, children?:RouteOption[]) => { + if (!children) { + children = []; } - }) + const showingChildren = children.filter(item => { + if (item.hidden) { + return false + } else { + // Temp set(will be used if only has one showing child) + onlyOneChild.value = item + return true + } + }) - // When there is only one child router, the child router is displayed by default - if (showingChildren.length === 1) { - return true - } + // When there is only one child router, the child router is displayed by default + if (showingChildren.length === 1) { + return true + } - // Show parent if there are no child router to display - if (showingChildren.length === 0) { - onlyOneChild.value = { ...parent, path: '', noShowingChildren: true } - return true - } + // Show parent if there are no child router to display + if (showingChildren.length === 0) { + onlyOneChild.value = { ...parent, path: '', noShowingChildren: true } + if (parent.name === '2222') { + console.log(onlyOneChild.value) + } + return true + } - return false + + return false }; const resolvePath = (routePath:string, routeQuery?:string): any => { - if (isExternal(routePath)) { - return routePath - } - if (isExternal(props.basePath)) { - return props.basePath - } - if (routeQuery) { - let query = JSON.parse(routeQuery); - return { path: getNormalPath(props.basePath + '/' + routePath), query: query } - } - return getNormalPath(props.basePath + '/' + routePath) + if (isExternal(routePath)) { + return routePath + } + if (isExternal(props.basePath)) { + return props.basePath + } + if (routeQuery) { + let query = JSON.parse(routeQuery); + return { path: getNormalPath(props.basePath + '/' + routePath), query: query } + } + return getNormalPath(props.basePath + '/' + routePath) } const hasTitle = (title: string | undefined): string => { - if(!title || title.length <= 5) { - return ""; - } - return title; + if(!title || title.length <= 5) { + return ""; + } + return title; } </script> - -<template> - <div v-if="!item.hidden"> - <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow"> - <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"> - <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }"> - <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" /> - <template #title> - <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span> - </template> - </el-menu-item> - </app-link> - </template> - - <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported> - <template v-if="item.meta" #title> - <svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> - <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span> - </template> - - <sidebar-item - v-for="child in item.children" - :key="child.path" - :is-nest="true" - :item="child as RouteOption" - :base-path="resolvePath(child.path)" - class="nest-menu" - /> - </el-sub-menu> - </div> -</template> -- Gitblit v1.9.3