2023-01-14_ant design实现导航菜单

1. 简介

• antd中是通过a-menu、a-menu-item、a-sub-menu来实现导航菜单的。
• a-menu-item、a-sub-menu必须在a-menu组件下面。
• a-sub-menu下可以继续拥有a-sub-menu，一直嵌套下去

2. a-menu常用属性

• mode //菜单类型，现在支持垂直、水平、和内嵌模式。支持的值：vertical | horizontal | inline。注意。。通常menu是嵌套在a-layout-sider组件下使用，此时mode必须是inline，否则显示会异常。
• inlineCollapsed //是否收缩。注意。。通常menu是嵌套在a-layout-sider组件下使用，此时这个值失去作用。。收缩改由a-layout-sider组件来实现
• openKeys //a-menu-item组件必须指定key属性。此时openKeys就是这些a-sub-menu的key的数组
• selectedKeys
• theme //主题。。支持的值有light和dark

<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark">

3. a-menu-item常用属性

• display //是否禁用
• key //必须指定，item的唯一标志
• icon //这个是slot，用来指定图标。官方建议如此书写，假如不这么写，，收缩显示会出问题，而且图标和item的标题没有了空白

<a-menu-item key="1">
  <template #icon><PieChartOutlined /></template>
  <i>Option1</i>
</a-menu-item>

4. a-sub-menu的常用属性

• icon //这个是slot，用来指定图标。
• title //这个是slot，用来指定子菜单（二级菜单）的标题。

5. 完整示例

<template>
    <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark">
      <a-sub-menu key="1">
        <template #icon><pull-request-outlined /></template>
        <template #title>sub1</template>
        <a-menu-item key="1.1"><template #icon><PieChartOutlined /></template><i>option 1.1</i></a-menu-item>
      </a-sub-menu>
      <a-menu-item key="2"><template #icon><PieChartOutlined /></template><i>option 2</i></a-menu-item>
      <a-menu-item key="3" @click="closeSubs"><template #icon><bars-outlined/> </template><i>收缩全部子菜单</i></a-menu-item>
    </a-menu>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      collapsed: false,
      selectedKeys: ['2'],
      openKeys: ['1'],
      preOpenKeys: ['sub1'],
    }
  },
  methods:{
    closeSubs(){
      this.openKeys = [];
    }
  }
}
</script>

6. 示例的效果

image.png

7. a-menu的事件

• 比较常用的有2个。
  select 被选中时调用 function({ item, key, selectedKeys })
  click 点击 MenuItem 调用此函数 function({ item, key, keyPath })

• 这2个事件都是针对a-menu-item的，区别：click只要被点击就会被触发。select需要有选择变化的时候才会被触发，比如原本是item1，选择了item2时才会触发这个事件。

• 参数都是一个对象，key为a-menu-item的key属性。可以通过这个事件和key属性实现路由功能

 <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark" @click="clickItem" @select="selectItem">
    clickItem(clickObj){
      console.log(clickObj)
      console.log(clickObj.item)
      console.log(clickObj.key)

    },
    selectItem(clickObj){
      console.log(clickObj)
      console.log(clickObj.item)
      console.log(clickObj.selectedkeys)
    }

8. 官方api

1. antd menu