角材料7-SideNav

角材料7-SideNav是一个基于Vue.js和ElementUI的前端导航菜单组件，它提供了一个灵活的侧边栏式导航菜单，展示了您的网站的主要页面和功能。

特性

• 基于ElementUI的设计风格
• 支持多级菜单
• 支持路由自动生成
• 响应式布局

安装

npm install jsl7-side-nav --save

引入

在您的Vue组件中引入组件并注册即可使用：

<template>
  <j7-side-nav :data="navData"></j7-side-nav>
</template>

<script>
import J7SideNav from 'jsl7-side-nav'

export default {
  components: {
    J7SideNav
  },
  data () {
    return {
      navData: [/* 导航菜单数据 */]
    }
  }
}
</script>

API

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | data | 导航菜单数据 | Array | [] | | default-active | 当前选中菜单的index | String, Number | -1 | | open-on-set | 在初始化时展开选中项的子菜单 | Boolean | false | | unique-opened | 是否只展开一个子菜单 | Boolean | false |

注：导航菜单数据格式

[
  {
    index: '1', // 当前菜单项的唯一标识符
    title: '一级菜单',
    icon: 'el-icon-s-home', // 可选项，菜单项的图标
    disabled: false, // 可选项，禁用当前菜单项
    children: [
      {
        index: '1-1',
        title: '二级菜单1',
        disabled: false
      },
      {
        index: '1-2',
        title: '二级菜单2',
        disabled: false
      }
    ]
  },
  {
    index: '2',
    title: '一级菜单',
    icon: 'el-icon-news', 
    disabled: false,
    children: [
      {
        index: '2-1',
        title: '二级菜单1',
        disabled: false
      },
      {
        index: '2-2',
        title: '二级菜单2',
        disabled: false
      }
    ]
  }
]

事件

| 事件名 | 说明 | 参数 | | --- | --- | --- | | select | 点击菜单项时触发 | index: 当前选中的菜单项的唯一标识符 |

示例

<template>
  <div>
    <j7-side-nav :data="navData" @select="handleSelect"></j7-side-nav>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navData: [{
        index: '1',
        title: 'Dashboard',
        icon: 'el-icon-s-home',
        children: [{
          index: '1-1',
          title: '分析页',
          disabled: false
        }, {
          index: '1-2',
          title: '监控页',
          disabled: false
        }, {
          index: '1-3',
          title: '工作台',
          disabled: false
        }]
      }, {
        index: '2',
        title: '用户管理',
        icon: 'el-icon-s-custom',
        children: [{
          index: '2-1',
          title: '用户列表',
          disabled: false
        }]
      }],
      currentNavIndex: null
    }
  },
  methods: {
    handleSelect (index) {
      this.currentNavIndex = index
    }
  }
}
</script>

以上是角材料7-SideNav组件的简单介绍，具体详解请参考官方文档。