如何解决VueJS管理模板侧栏:下面列出了子目录如何在侧边栏折叠时在单独菜单的右侧显示它们
我是Frontend的新手,我想为自己的项目使用Vue JS Framework,即管理模板: https://github.com/PanJiaChen/vue-element-admin#getting-started
我必须更改补充工具栏中子菜单的显示方式。现在,它们被列在父菜单的正下方,例如下图中嵌套的菜单1和菜单2:
我希望始终具有此功能,而不仅仅是在折叠状态下。 问题是,我无法找到isCollapsed展台究竟在哪里影响子菜单的显示方式。我非常确定它发生在el-submenu标记(在SidebarItem.vue中,您可以在下面看到)中,该标记来自Element Ui框架。当我寻找该组件的现有选项时,找不到像offsetX这样的东西,因此可以更改子菜单的位置。有什么方法可以影响它,或者我真的必须自己实现侧边栏,才能在右侧弹出子菜单?
在此先感谢您的任何建议!
<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)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isnest}">
<item :icon="onlyOneChild.Meta.icon||(item.Meta&&item.Meta.icon)" :title="onlyOneChild.Meta.title" />
</el-menu-item>
</app-link>
</template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title">
<item v-if="item.Meta" :icon="item.Meta && item.Meta.icon" :title="item.Meta.title" />
</template>
<sidebar-item
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
class="nest-menu"
/>
</el-submenu>
</div>
</template>
<script>
import path from 'path'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
import FixiOSBug from './FixiOSBug'
export default {
name: 'SidebarItem',components: { Item,AppLink },mixins: [FixiOSBug],props: {
// route object
item: {
type: Object,required: true
},isnest: {
type: Boolean,default: false
},basePath: {
type: String,default: ''
}
},data() {
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
// Todo: refactor with render function
this.onlyOneChild = null
return {}
},methods: {
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 true
}
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
this.onlyOneChild = { ... parent,path: '',noShowingChildren: true }
return true
}
return false
},resolvePath(routePath) {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(this.basePath)) {
return this.basePath
}
return path.resolve(this.basePath,routePath)
}
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。