mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-11-04 08:50:40 +00:00
107 lines
2.9 KiB
Vue
107 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<el-menu
|
|
router
|
|
:class="setColumnsAsideStyle"
|
|
background-color="transparent"
|
|
:default-active="activePath || defaultActive"
|
|
:collapse="setIsCollapse"
|
|
:unique-opened="getThemeConfig.isUniqueOpened"
|
|
:collapse-transition="true"
|
|
>
|
|
<template v-for="val in menuList">
|
|
<el-submenu
|
|
:index="val.path"
|
|
v-if="!val.is_show_path && val.children && val.children.length > 0"
|
|
:key="val.path"
|
|
>
|
|
<template slot="title">
|
|
<Icon
|
|
:class="
|
|
['defaults', 'classic'].includes(getThemeConfig.layout) && getThemeConfig.isCollapse ? 'center' : 'mr10'
|
|
"
|
|
:type="val.icon ? val.icon : ''"
|
|
/>
|
|
<span>{{ $t(val.title) }} </span>
|
|
</template>
|
|
<SubItem :chil="val.children" />
|
|
</el-submenu>
|
|
<template v-else-if="!val.is_show_path">
|
|
<el-menu-item :index="val.path" :key="val.path">
|
|
<Icon
|
|
:class="
|
|
['defaults', 'classic'].includes(getThemeConfig.layout) && getThemeConfig.isCollapse ? 'center' : 'mr10'
|
|
"
|
|
:type="val.icon ? val.icon : ''"
|
|
/>
|
|
<template slot="title" v-if="!val.isLink || (val.isLink && val.isIframe)">
|
|
<span>{{ $t(val.title) }}</span>
|
|
</template>
|
|
<template slot="title" v-else>
|
|
<a :href="val.isLink" target="_blank">{{ $t(val.title) }}</a>
|
|
</template>
|
|
</el-menu-item>
|
|
</template>
|
|
</template>
|
|
</el-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SubItem from '@/layout/navMenu/subItem.vue';
|
|
import { mapState } from 'vuex';
|
|
|
|
export default {
|
|
name: 'navMenuVertical',
|
|
components: { SubItem },
|
|
props: {
|
|
menuList: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
defaultActive: this.$route.path,
|
|
onRoutes: '',
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState('menu', ['activePath']),
|
|
// 设置分栏高亮风格
|
|
setColumnsAsideStyle() {
|
|
return this.$store.state.themeConfig.themeConfig.columnsAsideStyle;
|
|
},
|
|
// 获取布局配置信息
|
|
getThemeConfig() {
|
|
return this.$store.state.themeConfig.themeConfig;
|
|
},
|
|
// 设置左侧菜单是否展开/收起
|
|
setIsCollapse() {
|
|
return document.body.clientWidth < 1000 ? false : this.$store.state.themeConfig.themeConfig.isCollapse;
|
|
},
|
|
},
|
|
watch: {
|
|
// 监听路由的变化
|
|
$route: {
|
|
handler(to) {
|
|
this.defaultActive = to.path;
|
|
const clientWidth = document.body.clientWidth;
|
|
if (clientWidth < 1000) this.$store.state.themeConfig.themeConfig.isCollapse = false;
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
created() {},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
/deep/ .center {
|
|
text-align: center;
|
|
margin-right: 0 !important;
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|