ant design vue menu 导航菜单属性及事件

ant design vue menu 导航菜单属性及事件。导航菜单由菜单、菜单项、子菜单、项分组、分割线组成。
----Menu----
     └──Menu.Item 菜单项
     └──Menu.SubMenu  子菜单
     └──Menu.ItemGroup 菜单项分组
     └──Menu.Divider   分割线

在菜单项有给重要的属性叫key,这个一定要先了解,可以理解成Id。

<a-menu-item key="home" >
 <a-icon type="home"></a-icon><span>首页</span>
</a-menu-item>

Menu导航菜单属性

属性名称说明类型默认值
defaultOpenKeys初始展开的 SubMenu 子菜单项 key 数组
<a-menu v-model="current" defaultOpenKeys="['sub1']"  mode="inline" >
网页直接引用js方式
<a-menu v-model="current" default-open-keys="['sub1']"  mode="inline" >
string[]
defaultSelectedKeys初始时选中的菜单项
<a-menu  defaultSelectedKeys="['home']"  mode="inline" >
网页直接引用js方式
<a-menu  default-selected-keys="['home']"  mode="inline" >
如果设置了v-model="current"属性defaultSelectedKeys就会无效
string[]
forceSubMenuRender在子菜单展示之前就渲染进 DOMbooleanfalse
inlineCollapsedinline 时菜单是否收起状态(收起状态),这时需要注意的是,下面的“首页”必须用span标签,否则,收起状态会看文字,而不是只有图标。
<a-menu-item key="home" >
<a-icon type="home"></a-icon><span>首页</span>
</a-menu-item>
booleanfalse
inlineIndentinline 模式的菜单文字图标距离左边的间隔number24
mode支持水平、垂直、和内嵌模式三种 vertical vertical-right horizontal inline stringvertical
multiple是否允许选中多个菜单项,效果图如下A001booleanfalse
selectable是否允许选中
(ITXST.COM测试后无效)
booleantrue
selectedKeys(v-model)设置选中的菜单项 key 数组
<a-menu selectedKeys="['home','itxst']" mode="inline" style="width: 256px">
浏览器引入js网址的方式
<a-menu selected-keys="['home','itxst']" mode="inline" style="width: 256px">
string[]
subMenuCloseDelay鼠标离开子菜单后多少秒后关闭子菜单,单位:秒
(ITXST.COM测试后无效)
number0.1
subMenuOpenDelay鼠标进入子菜单后多少秒后展开子菜单,单位:秒
(ITXST.COM测试后无效)
number0
theme主题颜色 string: light darkstringlight
overflowedIndicator自定义 Menu 折叠时(收缩时)的图标DOM<span>···</span>

Menu导航菜单事件

事件名称
说明回调参数
click点击 MenuItem 菜单项调用此函数function({ item, key, keyPath })
deselect取消选中时调用,仅在 multiple 生效function({ item, key, selectedKeys })
openChangeSubMenu 展开/关闭的回调
在webpack开发环境中
<a-menu  @openChange="openChange"  " mode="inline" style="width: 256px">
在网页直接引入js的环境中
<a-menu  v-on:open-change="openChange"   mode="inline" style="width: 256px">
具体使用方法请看下方
function(openKeys: string[])
select被选中时调用function({ item, key, selectedKeys })

<!--浏览器方式下有些事件无法响应,需要引入vue-dash-event插件--> 
<script src="//www.itxst.com/package/ant-design-vue/vue-dash-event.js"></script>
<div id="app">
 <a-menu multiple="true" v-on:open-change="openChange" @click="home" @deselect="deselect" @select="select" 
    style="width: 256px">
   <a-menu-item key="home"> <a-icon type="home"></a-icon>首页</a-menu-item>
   <a-menu-item key="product" disabled> <a-icon type="dropbox"></a-icon>禁用项</a-menu-item>
   <a-menu-item key="itxst">
     <a-icon type="apple"></a-icon> <span>ITXST.COM</span>
   </a-menu-item>
  </a-menu>
</div>
<script>
 Vue.use(window['vue-dash-event']);
    var app = new Vue({
        el: '#app',
        data: {
            current: ['home']
        },
        methods:{
            home:function(obj){
            alert("点击了:"+obj.key)
            },
            deselect:function(obj)
            {
            alert("取消了:"+obj.key)
            },
            select:function(obj)
            {
            alert("选择了:"+obj.key)
            },
              openChange(openKeys) {
                            alert("展开了:"+openKeys)
                          }
        }
    });
</script>

在线试一试

Menu.Item菜单项属性

属性名称说明类型默认值
disabled是否禁用菜单项booleanfalse
keyitem 菜单项的唯一标志string
title设置收缩时展示的悬浮标题string

代码例子

<a-menu multiple="true" @click="home" style="width: 256px">
    <a-menu-item key="home" title="Go Home"> <a-icon type="home"></a-icon>首页</a-menu-item>
    <a-menu-item key="product" disabled> <a-icon type="dropbox"></a-icon>禁用项</a-menu-item>
    <a-menu-item key="itxst">
     <a-icon type="apple"></a-icon> <span>友情链接</span>
    </a-menu-item>
</a-menu>

Menu.SubMenu子菜单事件

属性名称说明回调参数
titleClick点击子菜单标题事件({ key, domEvent })

<div id="app">
   <a-menu mode="inline" style="width: 256px">
   <a-menu-item key="home"> <a-icon type="home"></a-icon>首页</a-menu-item>
   <a-sub-menu @titleClick="titleClick" key="sub1" title="产品列表">
   <span slot="title" class="submenu-title-wrapper"><a-icon type="share-alt"></a-icon>产品列表</span>
      <a-menu-item-group title="水果商品">
                <a-menu-item key="p1"> <a-icon type="windows"></a-icon>苹果</a-menu-item>
                <a-menu-item key="p2"> <a-icon type="apple"></a-icon>香蕉</a-menu-item>
      </a-menu-item-group>
    </a-sub-menu>
    <a-menu-item key="itxst">
            <a-icon type="apple"></a-icon>  友情链接
    </a-menu-item>
  </a-menu>
</div>
<script>
  var app = new Vue({
        el: '#app',
        data: {
        },
     methods: {
        titleClick: function (obj) {
                alert('你点击了子菜单')
        }
        }
    });
</script>

Menu.ItemGroup菜单分组

菜单项分组Menu.ItemGroup 的子元素必须是 MenuItem.

Menu.Divider菜单项分割线

菜单项分割线,只用在弹出子菜单内。

<a-menu mode="inline" style="width: 256px">
 <a-menu-item key="home"> <a-icon type="home"></a-icon>首页</a-menu-item>
 <a-sub-menu key="sub1" title="产品列表">
 <span slot="title" class="submenu-title-wrapper"><a-icon type="share-alt"></a-icon>产品列表</span>
   <a-menu-item-group title="水果商品">
       <a-menu-item key="p1"> <a-icon type="windows"></a-icon>苹果</a-menu-item>
       <a-menu-divider></a-menu-divider>
       <a-menu-item key="p2"> <a-icon type="apple"></a-icon>香蕉</a-menu-item>
   </a-menu-item-group>
  </a-sub-menu>
    <a-menu-item key="itxst">
        <a-icon type="apple"></a-icon>  友情链接
  </a-menu-item>
</a-menu>

(图:A001)