Menu 菜单

引入

import {Menu, SubMenu, MenuItem} from 'wwz-ui'

各组件如何配合使用请看代码。

预览

代码

<z-menu :selected.sync="selected" class="menu-demo-wrapper">
    <z-menu-item name="draw">绘画</z-menu-item>
    <z-menu-item name="opera">歌剧</z-menu-item>
    <z-sub-menu name="sub1">
        <template slot="title">
            音乐
        </template>
        <z-sub-menu name="sub2">
            <template slot="title">古典音乐</template>
            <z-menu-item name="baLuoKe">巴洛克主义</z-menu-item>
            <z-sub-menu name="sub3">
                <template slot="title">
                    浪漫主义
                </template>
                <z-menu-item name="liSiTe">李斯特</z-menu-item>
                <z-menu-item name="brams">勃拉姆斯</z-menu-item>
            </z-sub-menu>
            <z-menu-item name="classic">古典主义</z-menu-item>
        </z-sub-menu>
        <z-menu-item name="rock">摇滚</z-menu-item>
        <z-menu-item name="rb">R&B</z-menu-item>
    </z-sub-menu>
</z-menu>

API

参数	说明	类型	默认值
name	传给 MenuItem 和 SubMenu，标识 MenuItem 和 SubMenu，必传	String	-
selected	传给 Menu，代表点击的那一项的 name，点击后赋值给 selected	String	-
vertical	传给 Menu，开始垂直版本	Boolean	false

SubMenu 示例

下方代码，title 的 slot 将作为标题展示，剩余两项为点击标题的展示结果。

 <z-sub-menu name="sub2">
    <template slot="title">古典音乐</template>
    <z-menu-item name="baLuoKe">巴洛克主义</z-menu-item>
    <z-menu-item name="classic">古典主义</z-menu-item>
</z-sub-menu>