1. Diseño de la interfaz
Utilice componentes de diseño de elemento más para implementar: <el-container> el contenedor de diseño completo, <el-header> el contenedor de diseño superior, <el-aside> el contenedor de diseño lateral <el-main> el contenedor de diseño principal. Utilizando ideas de componenteización, el encabezado y el lado están componentesizados para facilitar el diseño.
<template>
<div class="common-layout">
<el-container>
<CommonAside />
<el-container>
<el-header>
<CommonHeader />
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script lang="ts" setup>
import CommonAside from '../components/CommonAside.vue'
import CommonHeader from '../components/CommonHeader.vue'
</script>
color: var(--el-text-color-primary);
}</style>2. Diseño de barra lateral y tecnología de implementación dinámica.
El diseño de la barra lateral se implementa utilizando el componente el-menu de element-plus. El componente el-menu implementa el menú de primer nivel y el-submenu implementa el menú de segundo nivel. el-menu-item implementa elementos de menú y el-submenu-item implementa elementos de menú secundarios. el-menu-item-group implementa el grupo de menús y el-menu-item-group implementa el grupo de menús.
Todo el contenido del menú se almacena en la matriz menuData y se representa dinámicamente mediante la instrucción v-for. Utilice noChildren para filtrar los datos del menú sin submenús, que son datos del menú de primer nivel. Filtre los datos del menú con submenús a través de hasChildren, que son los datos del menú secundario.
Lo que hay que explicar está en vue3 y element-plus:
1. Los valores de atributo de nombre de los componentes el-menu-item y el-submenu-item deben ser únicos; de lo contrario, se informará un error.
El atributo de índice también debe ser único; de lo contrario, todos los elementos responderán al hacer clic en un elemento en el menú real.
2. El icono adopta el diseño de componentes. A diferencia de las versiones anteriores, los componentes se llaman mediante cadenas de empalme (la mayoría de las implementaciones anteriores usaban este método). Específicamente:
<componente :is="item.icon" >>componente>
Este artículo de referencia de implementación: https://blog.csdn.net/qq_40190624/article/details/125019530 es más detallado.
IA recomendada: <el-icon><icon-svg :icon-class="item.icon" /></el-icon>
Si necesita personalizar el ícono, puede descargarlo del sitio web oficial de iconfont, colocarlo en la carpeta estática y luego introducirlo mediante la importación. https://blog.csdn.net/qq_39246667/article/details/124347398 El método específico es más complicado.
3. Es mejor almacenar el método noChildren() como una variable específica, de modo que se pueda llamar fácilmente en el código en lugar de llamar directamente a la función en v-for.
<template>
<!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
<el-radio-button :label="false">expand</el-radio-button>
<el-radio-button :label="true">collapse</el-radio-button>
</el-radio-group> -->
<el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
@close="handleClose">
<el-menu-item v-for="item in noChildren()" :key="item.name" :index="item.name">
<component :is="item.icon" style="width: 18px;height: 18px;"></component>
<template #title>{
{item.label}}</template>
</el-menu-item>
<el-sub-menu v-for="item in hasChildren()" :key="item.name" :index="item.label">
<template #title>
<el-icon>
<component :is="item.icon" style="width: 18px;height: 18px;"></component>
</el-icon>
<span>{
{item.label}}</span>
</template>
<el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
<el-menu-item :index="subItem.name">{
{subItem.label}}</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'
// 声明一个变量isCollapse，值为false
const isCollapse = ref(false)
const menuData = [
{
path: "/",
name: "home",
label: "首页",
icon: 'Menu',
url: "Home/Home",
},
{
path: "/mall",
name: "mall",
label: "商品管理",
icon: "Document",
url: "MallManage/MallManage",
},
{
path: "/user",
name: "user",
label: "用户管理",
icon: "Setting",
url: "UserManage/UserManage",
},
{
label: "其他",
icon: "location",
children: [
{
path: "/page1",
name: "page1",
label: "首页",
icon: "Setting",
url: "Other/PageOne",
},
{
path: "/page2",
name: "page2",
label: "首页",
icon: "Setting",
url: "Other/PageTwo",
},
],
},
]
// 声明一个函数handleOpen，参数为key和keyPath，用于接收参数
const handleOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
// 声明一个函数handleClose，参数为key和keyPath，用于接收参数
const handleClose = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const noChildren = () => { return menuData.filter((item) => !item.children) }
// 过滤出没有子菜单的菜单数据
const hasChildren = () => { return menuData.filter((item) => item.children) }
// 过滤出有子菜单的菜单数据
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
Nota: El elemento de índice debe ser único: index="item.label" La opción item.label está disponible en cada menú y es diferente. El título del elemento del submenú no tiene nombre, por lo que item.name informa un error.