插件名称 | vue-bloom-menu |
---|---|
发布时间 | 2020年12月1日 |
插件作者 | MingSeng-W |
使用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
}