@ektx/v-menubar v0.0.5

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