首页添加导航菜单豆腐块
This commit is contained in:
ctw committed
1 parent
a5f3098f64
commit
1bf8ff3ede
2 files changed
+136
-4
No files matched your search
@@ -0,0 +1,131 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
title: '首页导航菜单',
|
||||
icon: 'Postcard',
|
||||
description: '首页导航菜单展示',
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card class="box-card p-10" v-loading="loading">
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="(item, index) in navMenuListTop" :key="index">
|
||||
<div :class="['nav-menu-item-top', item.id == currentActiveMenuId ? 'nav-menu-item-active' : '']" @click="currentActiveMenuId = item.id">
|
||||
<el-icon class="nav-menu-item-icon"><List /></el-icon>
|
||||
<div class="nav-menu-item-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br />
|
||||
<el-row v-if="currentActiveMenuId" style="background-color: #eaf4fa; border-radius: 1rem; padding: 1rem">
|
||||
<el-col :span="4" v-for="(item, index) in navMenuListBottom" :key="index">
|
||||
<div class="nav-menu-item-bottom" @click="handleClickBottomMenu(item)">
|
||||
<el-icon class="nav-menu-item-icon"><List /></el-icon>
|
||||
<div class="nav-menu-item-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { pageList } from '/@/api/admin/menu';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
const navMenuList = ref<any>([]);
|
||||
const navMenuListTop = ref<any>([]);
|
||||
const currentActiveMenuId = ref('');
|
||||
|
||||
// 获取菜单列表
|
||||
const getNavMenuList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await pageList({ current: 1, size: 999 }).finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
if (res.code == 0 && res.data.length > 0) {
|
||||
navMenuList.value = res.data;
|
||||
navMenuListTop.value = res.data.map((item: any) => ({ id: item.id, name: item.name, path: item.path }));
|
||||
}
|
||||
} catch (error) {
|
||||
navMenuList.value = [];
|
||||
navMenuListTop.value = [];
|
||||
ElMessage.error('加载错误');
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const navMenuListBottom = computed(() => {
|
||||
if (navMenuList.value) {
|
||||
const currentMenuItem = navMenuList.value.find((item: any) => item.id == currentActiveMenuId.value);
|
||||
if (currentMenuItem && currentMenuItem.children) {
|
||||
return currentMenuItem.children.map((item: any) => ({ id: item.id, name: item.name, path: item.path }));
|
||||
}
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
|
||||
// 点击菜单项
|
||||
const handleClickBottomMenu = (item: any) => {
|
||||
router.push(item.path);
|
||||
};
|
||||
onMounted(async () => {
|
||||
await getNavMenuList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.nav-menu-item-top {
|
||||
height: 7rem;
|
||||
padding: 1rem;
|
||||
margin: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
justify-content: space-around;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 1rem;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
.nav-menu-item-icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
.nav-menu-item-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.nav-menu-item-active {
|
||||
background-color: #eaf4fa;
|
||||
}
|
||||
|
||||
.nav-menu-item-bottom {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-radius: 1rem;
|
||||
cursor: pointer;
|
||||
|
||||
.nav-menu-item-icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: aquamarine;
|
||||
}
|
||||
.nav-menu-item-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.nav-menu-item-bottom:hover {
|
||||
color: #2e5cf6;
|
||||
}
|
||||
</style>
|
||||
@@ -124,7 +124,7 @@ const defaultGrid = ref({
|
||||
copmsList: [
|
||||
['current-user', 'flow-data', 'audit-log', 'sys-log-line'],
|
||||
['news', 'sys-log', 'demo-chart1'],
|
||||
['calendar', 'favorite-menu','favorite-flow', 'demo-chart2'],
|
||||
['calendar', 'favorite-menu', 'favorite-flow', 'demo-chart2'],
|
||||
],
|
||||
});
|
||||
const customizing = ref(false);
|
||||
@@ -150,6 +150,7 @@ const allCompsList = computed(() => {
|
||||
const myCompsList = computed(() => {
|
||||
// 支持列表
|
||||
const myGrid = [
|
||||
'nav-menu',
|
||||
'calendar',
|
||||
'current-user',
|
||||
'news',
|
||||
@@ -209,8 +210,8 @@ const backDefaul = () => {
|
||||
widgets.value.style.removeProperty('transform');
|
||||
grid.value = defaultGrid.value;
|
||||
Local.remove(widgetsKey.value);
|
||||
// 重新加载页面
|
||||
window.location.reload();
|
||||
// 重新加载页面
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
@@ -306,7 +307,7 @@ onMounted(() => {
|
||||
|
||||
.customizing .widgets-wrapper {
|
||||
margin-right: -360px;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.customizing .widgets-wrapper .el-col {
|
||||
|
||||
Reference in new issue
Block a user