目录

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

一、成果展示

二、步骤

三、完整代码

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

一、成果展示

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

 图一

 图二

二、步骤

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

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

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

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

三、完整代码

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

  

    
      
        header
      
      
        
            
|||
            
              
                
                  
                  导航一
                
                
                  分组一
                  选项1
                  选项2
                
                
                  选项3
                
                
                  选项4
                  选项1
                
              
              
                
                导航二
              
              
                
                导航三
              
              
                
                导航四
              
            

        
        
          
        
      
      
        版权所有，翻版必究
      
    
  




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
    }
  }
}


#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;
}

PS：代码中:router="true"可以做如下说明：

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

定义路由的代码在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

所以才有了点击选项一，在中展示想要跳转的组件：