Element UI样式修改之NavMenu导航菜单

一、成果展示

二、步骤

三、完整代码

Element UI样式修改之NavMenu导航菜单

一、成果展示

Element UI官网给出的例子如图一，我想要改变导航栏文字右边的三角图标成图二的样式：

图一

图二

二、步骤

1. 首先将官网的例子复制到你的项目里面去，运行起来，鼠标右击选择检查：

2.打开Element UI图标的网页，然后右击选择检查，按照上图步骤就可以看到我们想要的图标的样式：

3.最后在<style></style>中添加以下代码即可达到我们想要的效果：

.el-icon-arrow-down:before {content: "";font-size: 18px;
}

三、完整代码

授人以鱼不如授人以渔，看完二的步骤就好了，Whatever，还是贴上完整代码App.vue记录于此：

<template><div id="app"><el-container><el-header>header</el-header><el-container><el-aside :width="isCollapse?'64px':'200px'"><div class="toggle-button" @click="toggleCollapse">|||</div><el-menu default-active="1-4-1"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false"unique-opened@open="handleOpen"@close="handleClose":collapse="isCollapse":router="true"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="/">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><span slot="title">选项4</span><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></el-aside><el-main><router-view></router-view></el-main></el-container><el-footer>版权所有，翻版必究</el-footer></el-container></div>
</template><script>export default {data() {return {isCollapse: false,};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},// 点击按钮，切换菜单的折叠与展开toggleCollapse () {this.isCollapse = !this.isCollapse}}
}
</script>
<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
.el-container{height: 100%;
}
.el-header,
.el-footer {background-color: #4a5064;color: peru;padding: 20px;
}
.el-aside{background-color: rgb(238, 241, 246);border: 1px solid #eee
}
.toggle-button {background-color: #4a5064;font-size: 10px;line-height: 24px;color: #fff;text-align: center;letter-spacing: 0.2em;cursor: pointer;
}
.el-icon-arrow-down:before {content: "";font-size: 18px;
}
</style>

PS：代码<el-menu></el-menu>中:router="true"可以做如下说明：

参数	说明	类型	默认值
router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转	boolean	false

<el-menu-item index="/">选项1</el-menu-item>中的index="/"就指明了导航目的地址，路由匹配到的组件将渲染在这里：<router-view></router-view>

<el-main><router-view></router-view>
</el-main>

定义路由的代码在index.js中：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: HomeView},{path: '/layout',name: 'layout',component: function () {return import( '../views/LayoutView.vue')}},{path: '/test',name: 'test',component: function () {return import( '../views/TestView.vue')}},{path: '/container',name: 'container',component: function () {return import( '../views/ContainerView.vue')}},{path: '/about',name: 'about',component: function () {return import( '../views/AboutView.vue')}}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

所以才有了点击选项一，在<el-main></el-main>中展示想要跳转的组件：

Element UI样式修改之NavMenu导航菜单相关推荐

element菜单组件样式修改NavMenu导航菜单
NavMenu导航菜单 1.选中菜单的颜色 .el-menu-item.is-active {background-color: #41a3fb !important; } 2.菜单hover颜色 . ...
vue+elementUI项目中使用NavMenu导航菜单
vue+elementUI项目中使用NavMenu 导航菜单在elementUI官网组件中NavMenu 导航菜单的使用只是简单地运用,在实践项目中还需要配合路由配置.一般后台管理系统不只是导航菜单 ...
Elementui NavMenu 导航菜单使用
官方文档https://element.eleme.cn/#/zh-CN/component/menu NavMenu 导航菜单官方使用项目实例官方使用 <el-menu :default ...
ElementUi中NavMenu 导航菜单router用法
问题引出写页面中遇到需要写NavMenu 导航菜单,作为菜鸟按照Element官方的NavMenu 导航菜单用法,传统式使用在data声明一个activeIndex作为跳转的首页,当我点击NavMe ...
vue项目，引入插件element ui 样式不生效
用vue ui 命令引入插件 element ui 样式不生效步骤一:执行如下命令,安装babel-plugin-component npm install babel-plugin-compon ...
NavMenu 导航菜单导航样式修改
样式修改,希望可以帮到大家. .el-menu-demo {background: none; } .el-menu--horizontal > .el-submenu .el-submenu_ ...
vue结合Element UI如何实现点击左侧菜单的折叠与展开
一.Element UI 中菜单的折叠与展开在Element UI中的官方文档中,在NavMenu 导航菜单中,在Menu Attribute 中,有一个 collapse 属性.它的作用是是否水平 ...
element-ui NavMenu 导航菜单通过一个按钮控制
element -ui 里导航菜单是通过两个按钮控制的,但实际开发中很多情况是通过一个按钮来toggle,而且有一个坑就是elemnt ui NavMenu的el-radio-butto 不是clic ...
VUE-Element组件（二）NavMenu导航菜单
标签介绍:el-menu为导航菜单组件,el-menu-item表示无子菜单的菜单项,el-submenu表示有子菜单的菜单项.注意el-menu-item和el-submenu最好都加上index标 ...

Element UI样式修改之NavMenu导航菜单

Element UI样式修改之NavMenu导航菜单

一、成果展示

二、步骤

三、完整代码

Element UI样式修改之NavMenu导航菜单相关推荐

最新文章

热门文章