|
@@ -0,0 +1,105 @@
|
|
|
+<template>
|
|
|
+ <div id="menus">
|
|
|
+ <el-row v-if="menuInfo.info.display">
|
|
|
+ <el-col :span="24" class="main" :style="{ background: menuInfo.info.backColor }">
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-menu
|
|
|
+ :default-active="$route.title"
|
|
|
+ :mode="menuInfo.info.mode"
|
|
|
+ :background-color="menuInfo.info.backColor"
|
|
|
+ :text-color="menuInfo.info.textColor"
|
|
|
+ :active-text-color="menuInfo.info.actColor"
|
|
|
+ router
|
|
|
+ >
|
|
|
+ <template v-for="item in menuInfo.menuList">
|
|
|
+ <!-- 二级菜单,三级菜单 -->
|
|
|
+ <template v-if="item.subs">
|
|
|
+ <el-submenu :index="item.index" :key="item.index">
|
|
|
+ <!-- 二级菜单-名称 -->
|
|
|
+ <template slot="title">{{ item.title }}</template>
|
|
|
+ <template v-for="subItem in item.subs">
|
|
|
+ <!-- 三级菜单 -->
|
|
|
+ <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
|
|
|
+ <!-- 三级菜单-名称 -->
|
|
|
+ <template slot="title">{{ subItem.title }}</template>
|
|
|
+ <!-- 三级菜单-菜单列表 -->
|
|
|
+ <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
|
|
|
+ <template slot="title">{{ threeItem.title }}</template>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ <!-- 二级菜单-菜单列表 -->
|
|
|
+ <el-menu-item v-else :index="subItem.index" :key="subItem.index" :route="{ path: item.index }">
|
|
|
+ <template slot="title">{{ item.title }}</template>
|
|
|
+ </el-menu-item>
|
|
|
+ </template>
|
|
|
+ </el-submenu>
|
|
|
+ </template>
|
|
|
+ <!-- 一级菜单 -->
|
|
|
+ <template v-else>
|
|
|
+ <el-menu-item :index="item.title" :key="item.index" :route="{ path: item.index }">
|
|
|
+ <template slot="title">{{ item.title }}</template>
|
|
|
+ </el-menu-item>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-menu>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: 'menus',
|
|
|
+ props: {
|
|
|
+ menuInfo: { type: Object, default: () => {} },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: function() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {},
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ test: {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ height: 51px;
|
|
|
+ border-bottom: 1px solid #f1f1f1;
|
|
|
+ .one {
|
|
|
+ height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ .el-menu--horizontal > .el-menu-item {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ border-bottom: none;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ /deep/.el-menu--horizontal > .el-menu-item.is-active {
|
|
|
+ background-color: #fe950e !important;
|
|
|
+ }
|
|
|
+ /deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|