Python全系列 教程
3567个小节阅读:5931k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
菜单页面功能的显示
xxxxxxxxxx
<template>
<div class="common-layout container">
<el-container class="container">
<el-header class="header">
<div class="logo">
<img src="../assets/logo1.png" alt="">
<span>电商后台管理系统</span>
</div>
<div class="user">
<el-button @click="logout" type="success" plain>退出</el-button>
<!-- <el-button @click="test">测试</el-button> -->
</div>
</el-header>
<el-container>
<el-aside class="aside">
<el-menu
active-text-color="#ffd04b"
background-color="#001529"
class="el-menu-vertical-demo"
default-active="2"
text-color="#fff"
unique-opened
router
>
<el-sub-menu :index="index+' '" v-for="(item,index) in menuList.menus">
<template #title>
<el-icon>
<component :is="menuList.icons[item.id]"></component>
</el-icon>
<span>{{ item.name }}</span>
</template>
<el-menu-item :index="childItem.path" v-for="childItem in item.children">
{{ childItem.name }}
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-aside>
<el-main>
<router-view/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { onMounted,reactive } from 'vue';
import api from '@/api/index.js' // 导入api接口
const menuList = reactive({
menus:[],
icons:{
'1':'User',
'2':'Tools',
'3':'Goods',
'4':'Shop',
'5':'PieChart'
}
})
const router = useRouter()
//当Dom元素加载完,调用
onMounted(() => {
get_menu()
})
// 退出登录
const logout = () => {
// 退出登录,从sessionStorage中移除token
sessionStorage.removeItem('token')
// 跳转到登录页面
router.push('/login')
}
// 获取菜单
const get_menu = () => {
api.get_menu().then(res => {
menuList.menus=res.data.data
})
}
</script>
icons
字体图标xxxxxxxxxx
yarn add @element-plus/icons-vue
在项目src目录下,创建plugins
文件夹,在文件夹下创建文件icons.js
文件
xxxxxxxxxx
import * as components from "@element-plus/icons-vue";
export default {
install: (app) => {
for (const key in components) {
const componentConfig = components[key];
app.component(componentConfig.name, componentConfig);
}
},
};
在main.js
中引入icons.js
文件
xxxxxxxxxx
import elementIcon from "./plugins/icons";
app.use(elementIcon)