Menu 菜单

快速的数据化配置一个递归菜单，常用于后台管理系统中。

基础使用

传递 menus 生成快速生成一个菜单。

绑定icon 不仅支持图标名称，也可以支持常规的图片。

点击查看代码

<template>
  <div class="demo">
    <ElRadioGroup v-model="mode" style="margin: 0px 20px 20px 0px">
      <ElRadioButton value="vertical">竖向菜单</ElRadioButton>
      <ElRadioButton value="horizontal">横向菜单</ElRadioButton>
    </ElRadioGroup>

    <ElRadioGroup v-model="isCollapse">
      <ElRadioButton :value="false">展开</ElRadioButton>
      <ElRadioButton :value="true">收起</ElRadioButton>
    </ElRadioGroup>

    <AgelMenu class="demo-menu" :mode="mode" :menus="menuData" :collapse="isCollapse" @select="select"> </AgelMenu>
    <ElMenu :model="mode"></ElMenu>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const mode = ref<'vertical' | 'horizontal'>('vertical')
const isCollapse = ref(false)
const menuData = [
  {
    title: '1 级菜单',
    icon: 'https://element-plus.org/images/element-plus-logo.svg',
    index: '/home-1',
    children: [
      {
        title: '1-1 菜单',
        icon: 'Menu',
        index: '/home-1-1'
      },
      {
        title: '1-2 菜单',
        icon: 'Menu',
        index: '/home-1-2',
        disabled: true
      },
      {
        title: '1-3 菜单',
        icon: 'Menu',
        index: '/home-1-2',
        hidden: true
      }
    ]
  },
  ...Array.from({ length: 5 }).map((v, i) => {
    return {
      title: i + 2 + '级菜单',
      icon: 'Menu',
      index: '/home-' + (i + 2)
    }
  })
]

function select(index: string, indexPath: string[]) {
  ElMessage.success('选中菜单' + index + indexPath)
}
</script>
<style></style>

属性

属性	类型	默认值	说明
menus	MenuItemProps[]	-	菜单配置
......	-	-	ElMenu 属性

MenuItemProps

属性	类型	默认值	说明
title	string	-	菜单名称，必须
index	index	-	路由地址，必须
icon	string	-	菜单图标或图片地址
disabled	boolean	-	是否禁用
hidden	boolean	-	是否隐藏
children	MenuItemProps[]	-	菜单配置
......	-	-	ElSubMenu 属性