换肤按钮下拉菜单源码-Vue开发实例（11）之el-menu实现左侧菜单导航

115资源网 52分钟前 网站源码 浏览：1 0

一级菜单实现最简单的一级菜单

在实现前面Aside.vue中的代码时，一级菜单其实很简单。 只需使用 el-menu 和 el-menu-item 即可。 Side.vue代码如下：

<template>
    <div>
        <el-menu>
            <el-menu-item>一级菜单1</el-menu-item>
            <el-menu-item>一级菜单2</el-menu-item>
            <el-menu-item>一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    export default {
        name: "Aside"
    }
</script>
<style scoped>
</style>

效果图如下：

设置菜单背景颜色和文字颜色

设置 el-menu 中的背景颜色和文本颜色属性

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff">
            <el-menu-item>一级菜单1</el-menu-item>
            <el-menu-item>一级菜单2</el-menu-item>
            <el-menu-item>一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

设置选择后菜单文本颜色

设置active-text-color属性，但index属性必须设置在需要生效的子菜单中，否则不会生效。 不要先设置索引。

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b">
            <el-menu-item>一级菜单1</el-menu-item>
            <el-menu-item>一级菜单2</el-menu-item>
            <el-menu-item>一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

你可以看到，我点击后，菜单文字的颜色没有改变。 现在让我们添加索引属性。

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b">
            <el-menu-item index="1">一级菜单1</el-menu-item>
            <el-menu-item index="2">一级菜单2</el-menu-item>
            <el-menu-item index="3">一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

在上图中，我们可以看到一开始并没有选择菜单。 您可以设置默认选择的菜单。 只需将default-active设置为相应的索引值即可。 比如我设置了默认选择第二个菜单以及第二个菜单的索引。 是 2，所以我们将 default-active="2" 添加到 el-menu

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2">
            <el-menu-item index="1">一级菜单1</el-menu-item>
            <el-menu-item index="2">一级菜单2</el-menu-item>
            <el-menu-item index="3">一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

刷新页面后默认选择第二个菜单

将图标添加到菜单

在菜单中添加图标会让我们的菜单看起来更加美观舒适。 说到图标的使用，可以参考我之前的文章：Vue开发实例中Icon的使用（08）

只需使用i标签，将其添加在菜单名称前面，XXX是图标的名称。

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2">
            <el-menu-item index="1"><i class="el-icon-location"></i>一级菜单1</el-menu-item>
            <el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

二级菜单实现二级菜单

修改一级菜单1为二级菜单

<template>
    <div>
        <el-menu background-color="#545c64" text-color="#ffffff"
                 active-text-color="#ffd04b" default-active="2" >
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
            </el-submenu>
            <el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
            <el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
        </el-menu>
    </div>
</template>

修改一下分析【其实很简单】：

将el-menu改为el-submenu按钮名称，用模板标签包裹图标，并添加slot="title"属性，否则菜单样式不正确。 添加两个新的el-menu-items.Three-level menu实现三级菜单

修改方法与二级菜单相同，即多加一层

<template>
<div>
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" default-active="2">
<el-submenu index="1">
<template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template>
<el-submenu index="1-1">
<template slot="title"><i class="el-icon-location"></i><span>选项1</span></template>
<el-menu-item index="1-1-1">选项1-1</el-menu-item>
<el-menu-item index="1-1-2">选项1-2</el-menu-item>
</el-submenu>
<el-submenu index="1-2">
<template slot="title"><i class="el-icon-location"></i><span>选项2</span></template>
<el-menu-item index="1-2-1">选项2-1</el-menu-item>
<el-menu-item index="1-2-2">选项2-2</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside"
}
</script>
<style scoped>
</style>

参加相关活动

打开打开，关闭关闭，选择3个事件

在el-menu中添加三个事件属性并编写相应的方法

<template>
<div>
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" default-active="2"
@open="handleOpen"
@close="handleClose"
@select="handSelect">
<el-submenu index="1">
<template slot="title"><i class="el-icon-location"></i><span>一级菜单1</span></template>
<el-submenu index="1-1">
<template slot="title"><i class="el-icon-location"></i><span>选项1</span></template>
<el-menu-item index="1-1-1">选项1-1</el-menu-item>
<el-menu-item index="1-1-2">选项1-2</el-menu-item>
</el-submenu>
<el-submenu index="1-2">
<template slot="title"><i class="el-icon-location"></i><span>选项2</span></template>
<el-menu-item index="1-2-1">选项2-1</el-menu-item>
<el-menu-item index="1-2-2">选项2-2</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
<el-menu-item index="3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside",
methods: {
handleOpen(key, keyPath) {
console.log("打开：",key, keyPath);
},
handleClose(key, keyPath) {
console.log("关闭：",key, keyPath);
},
handSelect(key, keyPath) {
console.log("选择：",key, keyPath);
}
}
}
</script>
<style scoped>
</style>

实现点击菜单跳转

当您单击菜单项时，右侧主窗口中会显示相应的页面。

创建3个页面 Main1.vue Main2.vue Main2.vue

<template>
<div>
这是Main1
</div>
</template>
<script>
export default {
name: "Main1"
}
</script>
<style scoped>
</style>


<template>
<div>
这是Main2
</div>
</template>
<script>
export default {
name: "Main2"
}
</script>
<style scoped>
</style>


<template>
<div>
这是Main3
</div>
</template>
<script>
export default {
name: "Main3"
}
</script>
<style scoped>
</style>

配置路由，在src下创建router.js，创建主路由索引，就是进入的主页面的三个索引子路由换肤按钮下拉菜单源码，用于跳转，对应main1 main2 main3页面。 子路由的跳转位置就是索引的Main位置，因为我们的管理系统只需要Main位置改变，页眉、左侧导航、下页脚不需要改变。

router.js如下：


import VueRouter from "vue-router"
import Index from "./components/Index";
const routes = [
//一级路由
{
path: '/index',
name: 'index',
component: Index,
//路由嵌套
children:[
{path: '/index/menu1',component: () => import('./components/Main1.vue')},
{path: '/index/menu2',component: () => import('./components/Main2.vue')},
{path: '/index/menu3',component: () => import('./components/Main3.vue')}
]
}
]
const router = new VueRouter({
mode:'history',
routes
})
export  default router;

在main.js中配置此路由，使路由生效

在原来的Index.vue页面中，设置路由跳转位置。 这里我们可以修改原来Main位置的router-view。

将路由配置添加到菜单

这里我们使用一级菜单，简单方便换肤按钮下拉菜单源码，修改Aside.vue的代码。

el-menu中添加router属性

在el-menu-item的索引中，设置对应的子路由

<template>
<div style="height: 100%;">
<el-menu background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b" class="el-menu-vertical-demo"
router>
<el-menu-item index="/index/menu1"><i class="el-icon-location"></i>一级菜单1</el-menu-item>
<el-menu-item index="/index/menu2"><i class="el-icon-document"></i>一级菜单2</el-menu-item>
<el-menu-item index="/index/menu3"><i class="el-icon-setting"></i>一级菜单3</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside"
}
</script>
<style scoped>
.el-menu-vertical-demo{
height: 100%;
}
</style>

我们进入索引主干道

点击左侧导航菜单

处理默认主窗口为空的情况

当我们第一次进入索引路由时，我们看到主窗口中什么也没有。

这显然不太好看，所以我们可以设置默认的跳转位置，如下：

将新路由添加到默认重定向的子路由中。 配置主路由中的重定向值到该子路由。

上面其实就是一个重定向操作。 直接进入index路由时，会默认跳转到Main路由，这样就会有一个默认页面。

下面我们只在地址栏输入index。 回车后默认会加上“/Main”，直接重定向。 同时主窗口中的页面也显示我们指定的页面。

概括

本节总结“el-menu实现左侧菜单导航”。 希望能够对大家有所帮助。 请大家帮我【点赞】+【收藏】+【评论区查看】。 如果你有兴趣加入小明的话，如果你正在学习Java的话，【跟随浪潮】以免迷路。

请到文章底部帮忙【一键三通】谢谢！

导航

✪ Vue开发实例目录总索引