web-template-vue3-js/src/layout/parts/Sidebar.vue

<!-- eslint-disable vue/no-deprecated-slot-attribute -->
<template>
  <div id="Sidebar">
    <el-row class="sidebar">
      <el-col :span="24" class="main">
        <el-col :span="24" class="first">
          <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            unique-opened
            router
            :background-color="styleInfo.backColor"
            :text-color="styleInfo.textColor"
            :active-text-color="styleInfo.activeColor"
          >
            <template v-for="item in items">
              <template v-if="item.type === '0'">
                <el-sub-menu :index="item._id" :key="item._id">
                  <template #title>
                    <i :class="['iconfont', item.icon]"></i>
                    <span>{{ item.name }}</span>
                  </template>
                  <template v-for="subItem in item.children">
                    <!-- TODO:这里有问题需要改成自引用输出方式.实现无线嵌套.目前只是最多三级 -->
                    <template v-if="subItem.type === '0'">
                      <el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem._id" :key="subItem._id">
                        <template #title>
                          <i :class="['iconfont', subItem.icon]"></i>
                          <span>{{ subItem.name }}</span>
                        </template>
                        <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.path">
                          <i :class="['iconfont', threeItem.icon]"></i>
                          <span>{{ threeItem.name }}</span>
                        </el-menu-item>
                      </el-sub-menu>
                    </template>
                    <el-menu-item v-else-if="subItem.type === '1'" :index="subItem.path" :key="subItem.path">
                      <i :class="['iconfont', subItem.icon]"></i>
                      <span>{{ subItem.name }}</span>
                    </el-menu-item>
                  </template>
                </el-sub-menu>
              </template>
              <template v-else>
                <el-menu-item :index="item.path" :key="item.path">
                  <i :class="['iconfont', item.icon]"></i>
                  <span>{{ item.name }}</span>
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { menuInfo } from '@/layout/site'
import { UserStore } from '@/store/user'

const route = useRoute()
const userStore = UserStore()
const user = computed(() => userStore.user)
let onRoutes = route.path
const styleInfo = ref(menuInfo.info)
let items = ref(menuInfo.menuList)

const getMenu = async () => {
  const menus = user.value.menus
  const newMenus = [...menus]
  items.value = newMenus
}

watch(
  user,
  (newVal) => {
    if (newVal && newVal._id) {
      if (newVal && newVal._id) getMenu()
      else ElMessage({ message: `暂无用户信息，无法获取菜单信息`, type: 'error' })
    }
  },
  {
    deep: true
  }
)
</script>
<style scoped lang="scss">
.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar > ul {
  height: 100%;
}

.main {
  .first {
    padding: 0 2px 0 0;

    .el-menu {
      border-right: none;
    }

    .iconfont {
      font-size: 18px;
      margin: 0 5px 0 0;
    }
  }
}
</style>