Vue.js的多级侧边栏菜单组件-vue-sidebar-menu

Vue.js的多级侧边栏菜单组件-vue-sidebar-menu
插件名称 vue-sidebar-menu
发布时间 2020年5月2日
插件作者 yaminncco

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

  •  

安装和下载:

# Yarn
$ yarn add vue-sidebar-menu
# NPM
$ npm install vue-sidebar-menu --save

使用:

1.安装并导入组件。

import Vue from 'vue'
import VueSidebarMenu from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
Vue.use(VueSidebarMenu)
// 或
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.可用的props。

// 侧边栏菜单(必需)
menu: {
  type: Array,
  required: true
},
// 侧边栏崩溃状态
collapsed: {
  type: Boolean,
  default: false
},
// 侧边栏宽度(扩大)
width: {
  type: String,
  default: '350px'
},
// 侧边栏宽度(崩溃)
widthCollapsed: {
  type: String,
  default: '50px'
},
// 一次只打开一个下级分类(只打开第一层)
showOneChild: {
  type: Boolean,
  default: false
},
// 保持所有下级开放
showChild: {
  type: Boolean,
  default: false
},
// 侧栏从右到左
rtl: {
  type: Boolean,
  default: false
},
// 使侧边栏相对于父窗口(默认情况下,侧边栏相对于视图端口)
relative: {
  type: Boolean,
  default: false
},
// 隐藏切换折叠btn
hideToggle: {
  type: Boolean,
  default: false
},
//侧栏主题(可用主题:'white-theme')
theme: {
  type: String,
  default: ''
},
// 在折叠模式下禁用悬停
disableHover: {
  type: Boolean,
  default: false
}

变更日志:

v4.8.0 (06/21/2021)

  • 修复属性覆盖

v4.7.4(11/24/2020)

  • 更新鼠标悬停并在折叠模式下修复项目高度

v4.7.3(2020年10月2日)

  • 更新

v4.7.2(09/27/2020)

  • 子项为空数组时修复项目

v4.7.1(08/25/2020)

  • 更新mobileItem的高度和宽度

v4.7.0(2020年8月19日)

  • 更新

v4.6.2(07/24/2020)

  • dist构建

v4.6.1(07/02/2020)

  • 修复触摸设备上的clickEvent