多级Vue左侧菜单组件（vue-sidebar-menu）

 website 下载

介绍

专为Vue.js仪表板应用程序设计的易于使用的多级侧边栏导航组件。

使用方法

1.安装并导入组件。

import Vue from 'vue'
import VueSidebarMenu from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
Vue.use(VueSidebarMenu)
// or
import { SidebarMenu } from 'vue-sidebar-menu'
export default {
  components: {
    SidebarMenu
  }
}

2.在应用程序上创建基本的侧边栏导航。

<template>
  <sidebar-menu :menu="menu" />
</template>
<script>
  export default {
      data() {
          return {
              menu: [
                  {
                      header: true,
                      title: 'Main Navigation',
                      hiddenOnCollapse: true
                  },
                  {
                      href: '/1',
                      title: 'Menu 1',
                      icon: 'ICON CLASS HERE'
                  },
                  {
                      href: '/2',
                      title: 'Menu 2',
                      icon: 'ICON CLASS HERE',
                      child: [
                          {
                              href: '/2-1',
                              title: 'Menu 2-1'
                          }
                      ]
                  }
              ]
          }
      }
  }
</script>

3. 默认配置项。

// Sidebar menu (required)
menu: {
  type: Array,
  required: true
},
// Sidebar Collapse state
collapsed: {
  type: Boolean,
  default: false
},
// Sidebar width (expanded)
width: {
  type: String,
  default: '350px'
},
// Sidebar width (collapsed)
widthCollapsed: {
  type: String,
  default: '50px'
},
// Keep only one child opened at a time (first level only)
showOneChild: {
  type: Boolean,
  default: false
},
// Keep all child open
showChild: {
  type: Boolean,
  default: false
},
// Sidebar right to left
rtl: {
  type: Boolean,
  default: false
},
// Make sidebar relative to the parent (by default the sidebar is relative to the viewport)
relative: {
  type: Boolean,
  default: false
},
// Hide toggle collapse btn
hideToggle: {
  type: Boolean,
  default: false
},
// Sidebar theme (available themes: 'white-theme')
theme: {
  type: String,
  default: ''
},
// Disable hover on collapse mode
disableHover: {
  type: Boolean,
  default: false
}