68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<template>
|
|
<el-menu
|
|
active-text-color="#ffd04b"
|
|
background-color="$menuBg"
|
|
class="el-menu-vertical-demo"
|
|
text-color="#fff"
|
|
router
|
|
unique-opened
|
|
:default-active="defaultActive"
|
|
:collapse="!$store.getters.siderType"
|
|
>
|
|
<el-sub-menu
|
|
v-for="(item, index) in menusList"
|
|
:index="item.id"
|
|
:key="item.id"
|
|
>
|
|
<template #title>
|
|
<el-icon>
|
|
<component :is="iconList[index]"></component>
|
|
</el-icon>
|
|
<span>{{ item.authName }}</span>
|
|
</template>
|
|
<el-menu-item
|
|
v-for="it in item.children"
|
|
:key="it.id"
|
|
:index="'/' + it.path"
|
|
@click="savePath(it.path)"
|
|
>
|
|
<template #title>
|
|
<el-icon>
|
|
<component :is="icon"></component>
|
|
</el-icon>
|
|
<span>{{ $t(`menus.${it.path}`) }}</span>
|
|
<!-- <span>{{ it.authName }}</span> -->
|
|
</template>
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
</el-menu>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { menuList } from '@/api/menu'
|
|
import { ref } from 'vue'
|
|
|
|
// 引入所需的 icon 列表
|
|
const iconList = ref(['user', 'setting', 'shop', 'tickets', 'pie-chart'])
|
|
const icon = ref('menu')
|
|
|
|
// 数据渲染
|
|
const menusList = ref([])
|
|
// 发起菜单数据获取请求并调用
|
|
const initMenusList = async () => {
|
|
menusList.value = await menuList()
|
|
console.log('测试', menusList.value)
|
|
}
|
|
initMenusList()
|
|
|
|
// 配合重定向，默认进入 user 界面
|
|
// const defaultActive = ref('/users')
|
|
|
|
const defaultActive = ref(sessionStorage.getItem('path') || '/users')
|
|
const savePath = (path) => {
|
|
sessionStorage.setItem('path', `/${path}`)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|