使用Vue.js，Vue Router和Webpack构建的动画径向导航菜单。

安装和下载：

# NPM
$ npm install vue-bloom-menu --save

基本用法：

1.如下导入vue-bloom-menu：

import Vue from 'vue'
import VueSidebarMenu from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'

2.注册组件。

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

3.创建一个基本的径向菜单组件。

<template>
  <sidebar-menu :menu="menu" />
</template>
export default {
  data() {
    return {
      menu: [
        {
          header: true,
          title: 'Main Nav',
          hiddenOnCollapse: true
        },
        {
          href: '/1',
          title: 'Nav Item 1',
          icon: 'custom icon class'
        },
        {
          href: '/2',
          title: 'Nav Item 2',
          icon: 'custom icon class',
          child: [
              {
                  href: '/2/1',
                  title: 'Nav Item 2.1'
              }
          ]
        }
      ]
    }
  }
}

4.默认道具。

menu: {
  type: Array,
  required: true
},
collapsed: {
  type: Boolean,
  default: false
},
width: {
  type: String,
  default: '350px'
},
widthCollapsed: {
  type: String,
  default: '50px'
},
showChild: {
  type: Boolean,
  default: false
},
theme: {
  type: String,
  default: ''
},
showOneChild: {
  type: Boolean,
  default: false
},
rtl: {
  type: Boolean,
  default: false
},
relative: {
  type: Boolean,
  default: false
},
hideToggle: {
  type: Boolean,
  default: false
},
disableHover: {
  type: Boolean,
  default: false
}

---

官网：https://github.com/MingSeng-W/vue-bloom-menu

演示：https://www.vue365.cn/code_demo.php?id=3236

GitHub下载：https://github.com/MingSeng-W/vue-bloom-menu/archive/master.zip