<template> <div v-if="!item.hidden" class="menu-wrapper"> <template v-if="hasOneShowingChild(item.children || [], item)"> <el-menu-item :index="index" :class="{ 'submenu-title-noDropdown': !isNest ,}" @click.native="toPage(item)" > <img v-if="showIcon(item)" class="menu-m-icon" :src="item.iconPath"> <svg-icon v-else-if="showSvg(item)" class="user-m-icon" :icon-class="item.iconPath" /> <div class="silder-menu-item-text"> {{ item.name || "" }} </div> <i v-if="item.children&&item.children.length>0" class="el-icon-arrow-down arrow" /> </el-menu-item> </template> <el-submenu v-else ref="subMenu" :index="index" popper-append-to-body> <template slot="title"> <img v-if="showIcon(item)" class="menu-m-icon" :src="item.iconPath"> <svg-icon v-else-if="showSvg(item)" class="user-m-icon" :icon-class="item.iconPath" /> <div class="silder-menu-item-text"> {{ item.name || "" }} </div> <!-- </div> --> </template> <sidebar-item v-for="(child, childIndex) in item.children" :key="child.path" :is-nest="true" :item="child" :index="index + '-' + childIndex" class="nest-menu" /> </el-submenu> </div> </template> <script> import FixiOSBug from './FixiOSBug' export default { name: 'SidebarItem', mixins: [FixiOSBug], props: { item: { type: Object, required: true }, index: { type: [String, Number], default: '' }, isNest: { type: Boolean, default: false } }, data() { // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237 // TODO: refactor with render function this.onlyOneChild = null return {} }, methods: { toPage(data, basePath) { let list = [] Object.keys(this.$store.state.tagsView.visitedViews).forEach(key => { list = [...list, ...this.$store.state.tagsView.visitedViews[key]] }) if (list.length >= 15) { this.$message.warning('超过最大标签数,添加新的标签页需要关闭已经打开标签页!') return } if (data.menuSource === '1') { const page = { path: `/iframePage/${encodeURIComponent(data.menuUrl)}`, query: {} } if (data.name) { page.query = { title: data.name } } if (data.menuRootAppId) { page.query.menuRootAppId = data.menuRootAppId } this.$router.push(page) } else { const item = data.dxApplicationPage if (!item) { this.$message.warning('当前菜单下未挂载页面,请联系管理员进行分配') return } let page if (item.type === '1') { page = { path: `/page/${item.pageKey}`, query: {} } } else if (item.type === '2') { page = { path: item.route, query: {} } } if (item.name) { page.query = { title: item.name } } if (data.menuRootAppId) { page.query.menuRootAppId = data.menuRootAppId } this.$router.push(page) } }, showIcon(meta) { return meta && !!meta.iconPath && meta.iconPath.indexOf('.') > -1 }, showSvg(meta) { return meta && !!meta.iconPath }, hasOneShowingChild(children = [], parent) { const showingChildren = children.filter((item) => { if (item.hidden) { return false } else { // Temp set(will be used if only has one showing child) this.onlyOneChild = item return true } }) // When there is only one child router, the child router is displayed by default if (showingChildren.length === 1) { return false } // Show parent if there are no child router to display if (showingChildren.length === 0) { this.onlyOneChild = { ...parent, path: '', noShowingChildren: true } return true } return false } } } </script> <style lang="scss"> .menu-wrapper { margin-top: 6px; .el-submenu__title, .el-menu-item { display: flex; align-items: center; justify-content: flex-start; color: rgb(236, 242, 251); } .el-submenu__title::after { content: ''; position: absolute; bottom: 4px; right: 4px; border-bottom: 4px solid #757F8B; border-left: 4px solid transparent; } .el-menu-item:hover { .arrow { transform: rotate(90deg); transition: .3s; } .menu-m-icon { filter: brightness(100); } } .arrow { position: absolute; right: 1px; font-size: 12px; } .el-submenu:hover { .el-submenu__title::after { border-bottom: 4px solid white; } .el-submenu__title:hover{ .menu-m-icon { filter: brightness(100); } } } } </style>