初始化项目

src/view/layout/aside/asideComponent/asyncSubmenu.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-sub-menu ref="subMenu" :index="routerInfo.name">
+
+    <template #title>
+      <div v-if="!isCollapse" class="gva-subMenu">
+        <el-icon v-if="routerInfo.meta.icon">
+          <component :is="routerInfo.meta.icon" />
+        </el-icon>
+        <span>{{ routerInfo.meta.title }}</span>
+      </div>
+      <template v-else>
+        <el-icon v-if="routerInfo.meta.icon">
+          <component :is="routerInfo.meta.icon" />
+        </el-icon>
+        <span>{{ routerInfo.meta.title }}</span>
+      </template>
+    </template>
+    <slot />
+  </el-sub-menu>
+</template>
+
+<script>
+export default {
+  name: 'AsyncSubmenu',
+}
+</script>
+
+<script setup>
+import { ref, watch } from 'vue'
+const props = defineProps({
+  routerInfo: {
+    default: function() {
+      return null
+    },
+    type: Object
+  },
+  isCollapse: {
+    default: function() {
+      return false
+    },
+    type: Boolean
+  },
+  theme: {
+    default: function() {
+      return {}
+    },
+    type: Object
+  }
+})
+
+const activeBackground = ref(props.theme.activeBackground)
+const activeText = ref(props.theme.activeText)
+const normalText = ref(props.theme.normalText)
+// const hoverBackground = ref(props.theme.hoverBackground)
+// const hoverText = ref(props.theme.hoverText)
+
+watch(() => props.theme, () => {
+  activeBackground.value = props.theme.activeBackground
+  activeText.value = props.theme.activeText
+  normalText.value = props.theme.normalText
+  // hoverBackground.value = props.theme.hoverBackground
+  // hoverText.value = props.theme.hoverText
+})
+
+</script>
+
+<style lang="scss" scoped>
+.el-sub-menu{
+  ::v-deep(.el-sub-menu__title){
+      padding: 6px;
+      color: v-bind(normalText);
+  }
+}
+
+  .is-active:not(.is-opened){
+  ::v-deep(.el-sub-menu__title) .gva-subMenu{
+      flex:1;
+      height: 100%;
+      line-height: 44px;
+      background: v-bind(activeBackground) !important;
+      border-radius: 4px;
+      box-shadow: 0 0 2px 1px v-bind(activeBackground) !important;
+      i{
+        color: v-bind(activeText);
+      }
+      span{
+        color: v-bind(activeText);
+      }
+    }
+  }
+
+.gva-subMenu {
+  padding-left: 4px;
+}
+</style>

src/view/layout/aside/asideComponent/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <component
+    :is="menuComponent"
+    v-if="!routerInfo.hidden"
+    :is-collapse="isCollapse"
+    :theme="theme"
+    :router-info="routerInfo"
+  >
+    <template v-if="routerInfo.children&&routerInfo.children.length">
+      <AsideComponent
+        v-for="item in routerInfo.children"
+        :key="item.name"
+        :is-collapse="false"
+        :router-info="item"
+        :theme="theme"
+      />
+    </template>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'AsideComponent',
+}
+</script>
+
+<script setup>
+import MenuItem from './menuItem.vue'
+import AsyncSubmenu from './asyncSubmenu.vue'
+import { computed } from 'vue'
+const props = defineProps({
+  routerInfo: {
+    type: Object,
+    default: () => null,
+  },
+  isCollapse: {
+    default: function() {
+      return false
+    },
+    type: Boolean
+  },
+  theme: {
+    default: function() {
+      return {}
+    },
+    type: Object
+  }
+})
+
+const menuComponent = computed(() => {
+  if (props.routerInfo.children && props.routerInfo.children.filter(item => !item.hidden).length) {
+    return AsyncSubmenu
+  } else {
+    return MenuItem
+  }
+})
+
+</script>
+

src/view/layout/aside/asideComponent/menuItem.vue

@@ -0,0 +1,121 @@
+<template>
+  <el-menu-item :index="routerInfo.name">
+    <template v-if="isCollapse">
+      <el-tooltip
+        class="box-item"
+        effect="light"
+        :content="routerInfo.meta.title"
+        placement="right"
+      >
+        <el-icon v-if="routerInfo.meta.icon">
+          <component :is="routerInfo.meta.icon" />
+        </el-icon>
+      </el-tooltip>
+    </template>
+    <template v-else>
+      <div class="gva-menu-item">
+        <el-icon v-if="routerInfo.meta.icon">
+          <component :is="routerInfo.meta.icon" />
+        </el-icon>
+        <span class="gva-menu-item-title">{{ routerInfo.meta.title }}</span>
+      </div>
+    </template>
+  </el-menu-item>
+</template>
+
+<script>
+export default {
+  name: 'MenuItem',
+}
+</script>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  routerInfo: {
+    default: function() {
+      return null
+    },
+    type: Object
+  },
+  isCollapse: {
+    default: function() {
+      return false
+    },
+    type: Boolean
+  },
+  theme: {
+    default: function() {
+      return {}
+    },
+    type: Object
+  }
+})
+
+const activeBackground = ref(props.theme.activeBackground)
+const activeText = ref(props.theme.activeText)
+const normalText = ref(props.theme.normalText)
+const hoverBackground = ref(props.theme.hoverBackground)
+const hoverText = ref(props.theme.hoverText)
+
+watch(() => props.theme, () => {
+  activeBackground.value = props.theme.activeBackground
+  activeText.value = props.theme.activeText
+  normalText.value = props.theme.normalText
+  hoverBackground.value = props.theme.hoverBackground
+  hoverText.value = props.theme.hoverText
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+ .gva-menu-item{
+   width: 100%;
+    flex:1;
+    height: 44px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding-left: 4px;
+
+.gva-menu-item-title {
+    flex:1;
+  }
+}
+
+.el-menu--collapse{
+  .el-menu-item.is-active{
+    color: v-bind(activeBackground);
+  }
+}
+
+.el-menu-item{
+  color: v-bind(normalText);
+}
+
+.el-menu-item.is-active{
+  .gva-menu-item{
+    background: v-bind(activeBackground) !important;
+    border-radius: 4px;
+    box-shadow: 0 0 2px 1px v-bind(activeBackground) !important;
+    i{
+      color: v-bind(activeText);
+    }
+    span{
+      color: v-bind(activeText);
+    }
+  }
+}
+
+.el-menu-item:hover{
+  .gva-menu-item{
+    background: v-bind(hoverBackground);
+    border-radius: 4px;
+    box-shadow: 0 0 2px 1px v-bind(hoverBackground);
+    color: v-bind(hoverText);
+  }
+}
+
+</style>