element是什么，前端框架element Plus教程-嗨游网

<template> <div class="common-layout"> <el-container> <el-aside width="200px"> <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-sub-menu index="1"> <template #title> <el-icon><location /></el-icon> <span>Navigator One</span> </template> <el-menu-item-group> <template #title><span>Group One</span></template> <el-menu-item index="1-1">item one</el-menu-item> <el-menu-item index="1-2">item two</el-menu-item> </el-menu-item-group> <el-menu-item-group title="Group Two"> <el-menu-item index="1-3">item three</el-menu-item> </el-menu-item-group> <el-sub-menu index="1-4"> <template #title><span>item four</span></template> <el-menu-item index="1-4-1">item one</el-menu-item> </el-sub-menu> </el-sub-menu> <el-menu-item index="2"> <el-icon><icon-menu /></el-icon> <template #title>Navigator Two</template> </el-menu-item> <el-menu-item index="3" disabled> <el-icon><document /></el-icon> <template #title>Navigator Three</template> </el-menu-item> <el-menu-item index="4"> <el-icon><setting /></el-icon> <template #title>Navigator Four</template> </el-menu-item> </el-menu> </el-aside> <el-container> <el-header> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect" > <el-menu-item index="1">Processing Center</el-menu-item> <el-sub-menu index="2"> <template #title>Workspace</template> <el-menu-item index="2-1">item one</el-menu-item> <el-menu-item index="2-2">item two</el-menu-item> <el-menu-item index="2-3">item three</el-menu-item> <el-sub-menu index="2-4"> <template #title>item four</template> <el-menu-item index="2-4-1">item one</el-menu-item> <el-menu-item index="2-4-2">item two</el-menu-item> <el-menu-item index="2-4-3">item three</el-menu-item> </el-sub-menu> </el-sub-menu> <el-menu-item index="3" disabled>Info</el-menu-item> <el-menu-item index="4">Orders</el-menu-item> </el-menu> </el-header> <el-main>Main</el-main> </el-container> </el-container> </div></template><script lang="ts" setup>import { ref } from 'vue'import { Document, Menu as IconMenu, Location, Setting,} from '@element-plus/icons-vue'const isCollapse = ref(true)const handleOpen = (key: string, keyPath: string[]) => { console.log(key, keyPath)}const handleClose = (key: string, keyPath: string[]) => { console.log(key, keyPath)}const activeIndex2 = ref('1')const handleSelect = (key: string, keyPath: string[]) => { console.log(key, keyPath)}</script><style>.el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px;}</style>

觉得这个不好看没关系，后面我们会对这个页面进行一个自主DIY。首先我们先修改如下参数让他们的颜色统一：

active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"

element是什么，前端框架element Plus教程

3.4.1、侧边栏优化

有些同学可能觉得这个按键不好看，希望修改一下其中的样式。

这边先展示一些代码，后面在完成vue的学习以后在来让大家完成对这块的改编。（使用v-if来判断目前状态展示按钮）

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px"> <el-radio-button :label="false" v-if="isCollapse" ><el-icon><fold /></el-icon> </el-radio-button> <el-radio-button :label="true" v-if="!isCollapse" ><el-icon><expand /></el-icon ></el-radio-button> </el-radio-group>

上面代码需要在底下script中引入如下内容：

element是什么，前端框架element Plus教程