commonMenu.vue
<template><div class="commonMenuStyle"><el-sub-menu v-if="hasChildren" :index="item.MenuId"><template #title><el-icon><location /></el-icon><!-- isCollapseMenu 用于折叠是不显示名字,只展示icon--><span v-if="!isCollapseMenu">{{ item.text }}</span></template><!-- :index="child.routerName" 用于跳转 --><el-menu-itemv-for="child in item.Children":key="child.MenuId":item="child":index="child.routerName"><el-icon class="tabsIconStyle"><component :is="child.icon"> </component></el-icon><template #title> {{ child.text }} </template></el-menu-item></el-sub-menu><el-menu-item v-else :index="item.routerName"><el-icon class="tabsIconStyle"><component :is="item.icon"> </component></el-icon><template #title>{{ item.text }}</template></el-menu-item></div>
</template><script>
export default {name: "MenuItem",props: ["item", "isCollapseMenu"],data() {return {hasChildren: false,isCollapseFlag: false, };},created() {},computed: {},mounted() {},methods: {},watch: {// 监听对象的写法(监听页码的变化)item: {handler(newValue, oldVal) {this.hasChildren = newValue.Children && newValue.Children.length > 0;},deep: true, // 深度监听immediate: true, //写上它,初始化时也会调用监听},},
};
</script><style scoped lang='scss'>
/* 你可以在这里添加自定义样式 */
.commonMenuStyle {.el-menu-item.is-active {color: #00325c;background-color: #fff;}::v-deep .el-sub-menu:hover {color: #166adb !important;}::v-deep .el-sub-menu__title:hover {color: #166adb !important;}::v-deep .el-menu--inline {background-color: #0a4577;}
}
</style>
下面可不看
a页面使用: