Menu菜单导航API文档

wb-menu参数：

参数	说明	类型	可选	默认	必填
mode	模式	string	horizontal / vertical	vertical	否
default-active	默认选中哪个（以index唯一名称为准）	String	-	-	否
default-openeds	默认展开第几组	Array[‘1’]	-	-	否
router	是否使用 vue-router 的模式，以 index 作为 path 进行路由跳转	Boolean	true/false	-	否
trees	菜单数据（参数看下面↓↓）	Array	-	-	是
backgroundColor	菜单的背景色（仅支持 hex 格式: #FFF）	String	-	-	否
textColor	菜单的文字颜色（仅支持 hex 格式: #FFF）	String	-	-	否
activeTextColor	当前激活菜单的文字颜色（仅支持 hex 格式: #FFF）	String	-	-	否

注意：（属性可根据el-page，阅读及使用）

• trees参数：

参数	说明	类型	可选	默认	必填
index	唯一标识（router模式下作为 path）	String	-	-	是
icon	菜单左侧图标	String	-	-	否
label	名称	String	-	-	是
disabled	是否禁止使用	Boolean	true/false	false	否
childLabel	子集（参数同上，以此类推）	Array	-	-	否

• event事件

参数	说明	回调参数
handleOpen	展开触发	value
handleClose	收起触发	value
handleselect	选择触发	value

常见问题：

• icon的默认颜色是灰色。通过text-color也不会改变icon的颜色，但是当菜单处于激活状态的时候颜色会变
• 所以我们要在最外层设置样式：

.leftNav >>>[class*=" el-icon-"]{
    color: #FFFFFF;
  }

• 组件占用全屏问题，这样设计主要为了，样式通过外面来控制
• 在组件外面包一个盒子，然后去控制样式。

.leftNav{
    width: 200px;
    min-height: 600px;
    background: #009688 ;
    box-shadow:0 0 15px rgba(51,51,51,0.1);
    border-radius: 8px;
  }

使用组件案例：

<template>
  <div class="leftNav">
    <wb-menu :defaultOpeneds="MenuIofo.defaultOpeneds"
             :mode="MenuIofo.mode"
             :collapse="MenuIofo.collapse"
             :defaultActive="MenuIofo.defaultActive"
             :backgroundColor="MenuIofo.backgroundColor"
             :textColor="MenuIofo.textColor"
             :activeTextColor="MenuIofo.activeTextColor"
             :trees="MenuIofo.trees"
             :router="MenuIofo.router"
             @handleselect="navClickFn">
    </wb-menu>
  </div>
</template>

<script>
  export default {
    name: 'wb-ceshiMenu',
    data () {
      return {
        MenuIofo: {
          //mode: 'horizontal', // 模式 (vertical 模式下 不水平折叠)
          collapse: false , // 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
          defaultActive: '1-1',  // 默认选中
          //defaultOpeneds: ['2'],    // 默认展开
          backgroundColor: '#009688',
          textColor: '#FFF',  // 这里注意 通过样式来改变icon图标颜色
          activeTextColor: '#42FF14',
          router: false, // 是否启用路由
          // 菜单数据
          trees: [
            {
              index:'1',
              icon:'el-icon-s-tools',
              label:"平台增值服务管理",
              disabled: false,
              childLabel:[
                {index: '1-1', label: '课程主数据'},
                {index: '1-2', label: '素材主数据'},
                {index: '1-3', label: '云课首页配置',
                  childLabel:[
                    {index: '1-1-1', label: '课程1'},
                    {index: '1-1-2', label: '素材1'},
                    {index: '1-1-3', label: '云课1',
                      childLabel:[
                        {index: '1-2-1', label: '课程2'},
                        {index: '1-2-2', label: '素材2'},
                        {index: '1-2-3', label: '云课2'}
                      ],
                    }
                  ],
                }
              ],
            },
            {
              index:'2',
              label:"云课模块",
              icon:'el-icon-user-solid',
              childLabel:[
                {index: '2-1', label: '课程主数据'},
                {index: '2-2', label: '素材主数据'},
                {index: '2-3', label: '云课首页配置'}
              ],
            },
            {
              index:'3',
              label:"职教书城",
              icon:'el-icon-s-help',
            },
          ],
        },
      }
    },
    methods:{
      navClickFn (val) {
        console.log(val)
      },
      handleSelect (index,path) {
        console.log(index,path)
      }
    }
  }
</script>

<style scoped>
  .leftNav{
    width: 200px;
    min-height: 600px;
    background: #009688 ;
    box-shadow:0 0 15px rgba(51,51,51,0.1);
    border-radius: 8px;
  }
  .leftNav >>>[class*=" el-icon-"]{
    color: #FFFFFF;
  }
</style>