| | |
| | | <template> |
| | | <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false"> |
| | | <template v-for="(item, index) in topMenus"> |
| | | <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" |
| | | ><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item |
| | | > |
| | | </template> |
| | | |
| | | <!-- 顶部菜单超出数量折叠 --> |
| | | <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber"> |
| | | <template #title>更多菜单</template> |
| | | <template v-for="(item, index) in topMenus"> |
| | | <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber" |
| | | ><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item |
| | | > |
| | | </template> |
| | | </el-sub-menu> |
| | | </el-menu> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { constantRoutes } from '@/router'; |
| | | import { isHttp } from '@/utils/validate'; |
| | |
| | | visibleNumber.value = parseInt(String(width / 85)); |
| | | } |
| | | |
| | | const handleSelect = (key: string, keyPath: string[]) => { |
| | | const handleSelect = (key: string) => { |
| | | currentIndex.value = key; |
| | | const route = routers.value.find(item => item.path === key); |
| | | if (isHttp(key)) { |
| | |
| | | window.open(key, "_blank"); |
| | | } else if (!route || !route.children) { |
| | | // 没有子路由路径内部打开 |
| | | router.push({ path: key, fullPath: '' }); |
| | | const routeMenu = childrenMenus.value.find(item => item.path === key); |
| | | if (routeMenu && routeMenu.query) { |
| | | let query = JSON.parse(routeMenu.query); |
| | | router.push({ path: key, query: query }); |
| | | } else { |
| | | router.push({ path: key }); |
| | | } |
| | | appStore.toggleSideBarHide(true); |
| | | } else { |
| | | // 显示左侧联动菜单 |
| | |
| | | setVisibleNumber() |
| | | }) |
| | | </script> |
| | | |
| | | <template> |
| | | <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false"> |
| | | <template v-for="(item, index) in topMenus"> |
| | | <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" |
| | | ><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item |
| | | > |
| | | </template> |
| | | |
| | | <!-- 顶部菜单超出数量折叠 --> |
| | | <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber"> |
| | | <template #title>更多菜单</template> |
| | | <template v-for="(item, index) in topMenus"> |
| | | <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber" |
| | | ><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item |
| | | > |
| | | </template> |
| | | </el-sub-menu> |
| | | </el-menu> |
| | | </template> |
| | | |
| | | <style lang="scss"> |
| | | .topmenu-container.el-menu--horizontal > .el-menu-item { |