@ektx/v-menubar
v0.0.5
Published
like macos top menu
Downloads
10
Readme
VMenuBar
仿 MacOS 主菜单效果
使用
HTML
<VMenuBar :nav="navs" />
JavaScript
import VMenuBar from 'VMenuBar'
export default {
data () {
return {
navs: [
{
title: '计划',
to: '/todoList'
},
{
title: '通讯录',
to: '/addressBook'
},
{
title: 'Apple',
children: [
{
title: 'Mac',
children: [
{
title: 'Macbook',
href: '#'
},
{
title: 'Macbook Air',
href: '#'
},
{
title: 'Macbook Pro',
href: '#'
},
{
type: 'separator'
},
{
title: 'iMac',
href: '#'
},
{
title: 'iMac Pro',
href: '#'
},
{
title: 'Mac Pro',
href: '#'
}
]
},
{
title: 'iPhone',
href: '#'
},
{
title: 'iPad',
href: '#'
},
{
type: 'separator'
},
{
title: 'help',
fun: () => {
alert('apple help')
}
}
]
},
{
title: 'API',
href: '/apiTest',
target: '_blank'
}
]
}
}
}
Props
| 属性 | 类型 | 说明 | 默认值 | | --------- | ---------------------------- | -------------- | ------ | | nav | Array | 菜单内容 | - | | direction | String,可选内容为['', 'end'] | 菜单的方向控制 | - | | | | | |
Nav
| 属性 | 类型 | 说明 | 默认值 | | ------ | ------ | ------------------------------------------------------------ | ------ | | title | String | 显示文字 | - | | ico | String | 小图标地址 | - | | to | String | 路由地址 | - | | href | String | 外部地址;html原生跳转(a 链接) | - | | target | String | 指定跳转方式;可以参考 html a target | - |