提交 400c96d9 编写于 作者: T tinyu

fix:调整菜单

上级 8ffac32b
......@@ -3,39 +3,39 @@
<el-header>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<template>
<el-menu-item index="1"><i class="el-icon-s-pie"></i>主页</el-menu-item>
</template>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<template v-for="(menu, i) in menuList" >
<el-submenu v-if="menu.children" index="2" :key="`submenu-${i}`">
<template slot="title">{{ menu.meta.title }}</template>
<el-menu-item v-for="(menu2, m) in menu.children" :key="`menu-${i}-${m}`" :index="`menu-${i}-${m}`">{{ menu2.meta.title }}</el-menu-item>
</el-submenu>
<el-menu-item v-else :key="`menu-${i}`" :index="`menu-${i}`"><i :class="menu.meta.icon"></i>{{ menu.meta.title }}</el-menu-item>
</template>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
<el-menu-item index="4"><a href="https://inscode.csdn.net/@tinyu5/VueJS" target="_blank">InsCode</a></el-menu-item>
</el-menu>
</el-header>
<el-main>
<DynamicRoute/>
<DynamicRoute />
</el-main>
</el-container>
</template>
<script>
import DynamicRoute from './dynamicRoute.vue';
import routes from '@/router/routes'
function converRouteData(arr){
};
import Utils from '@/utils/index.js'
export default {
name: 'layout',
components:{DynamicRoute},
components: { DynamicRoute },
data() {
return {
menuList:[]
menuList: [],
activeIndex2: ''
}
},
created() {
this.menuList = Utils.coventRouteData(routes, item => item);
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
......@@ -44,7 +44,8 @@ export default {
}
</script>
<style scoped>
.el-header, el-main{
padding:0;
.el-header,
el-main {
padding: 0;
}
</style>
\ No newline at end of file
// directory 是要搜索的目录 , useSubdirectories 表示是否搜索子目录, regExp 是匹配文件的正则表达式
const context = require.context('./modules', false, /.js$/)
// 讲所有模块导出内容添加到_obj中
const _obj = context.keys().reduce((pre, key) => {
const name = key.replace(/.\/|.js/g,'')
const module=context(key);
Object.entries(module).forEach(([attr,value])=> {
pre[attr] = value;
})
return pre;
},{})
export default _obj
\ No newline at end of file
/**
*
* @param {Array} list 路由数据
* @param {Function} processFn 处理函数
* @returns {Array} 数组数据
*/
export function coventRouteData(list, processFn) {
return list.map(item => {
let { children, component, ...rest } = item;
if (children && Array.isArray(children)) {
children = coventRouteData(children, processFn)
return processFn({ children, ...rest })
}
return processFn(rest)
});
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册