Element Plus 如何自定义菜单menu-item的高度

Element Plus中部分采用了scss自定义变量，但是以--开头的都是私有变量，通过scss文件可以覆盖的变量只有@开头的变量，在实际应用中，往往我们需要的是改变私有变量，在官方文档中始终没有给出有实际应用价值的例子，比如从始至终的这个例子：)))

:root {--el-color-primary: green;
}

在这里我们来实现一个通过变更菜单条目私有变量，来自定义菜单条目的高度。这里el-menu-item-height变量默认值为56px，我们把它变为40px:

.main-menu {--el-menu-item-height: 40px;--el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
}

在el-menu中使用这个class就可以让自定义的高度生效。

<template><el-menu:default-active="activeIndex"class="main-menu"mode="horizontal"@select="handleSelect"><el-menu-item index="1">Processing Center</el-menu-item><el-sub-menu index="2"><template #title>Workspace</template><el-menu-item index="2-1">item one</el-menu-item><el-menu-item index="2-2">item two</el-menu-item><el-menu-item index="2-3">item three</el-menu-item><el-sub-menu index="2-4"><template #title>item four</template><el-menu-item index="2-4-1">item one</el-menu-item><el-menu-item index="2-4-2">item two</el-menu-item><el-menu-item index="2-4-3">item three</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="3" disabled>Info</el-menu-item><el-menu-item index="4">Orders</el-menu-item></el-menu><div class="h-6" /><el-menu:default-active="activeIndex2"class="main-menu"mode="horizontal"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"@select="handleSelect"><el-menu-item index="1">Processing Center</el-menu-item><el-sub-menu index="2"><template #title>Workspace</template><el-menu-item index="2-1">item one</el-menu-item><el-menu-item index="2-2">item two</el-menu-item><el-menu-item index="2-3">item three</el-menu-item><el-sub-menu index="2-4"><template #title>item four</template><el-menu-item index="2-4-1">item one</el-menu-item><el-menu-item index="2-4-2">item two</el-menu-item><el-menu-item index="2-4-3">item three</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="3" disabled>Info</el-menu-item><el-menu-item index="4">Orders</el-menu-item></el-menu>
</template><script lang="ts" setup>
import { ref } from 'vue'const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {console.log(key, keyPath)
}
</script>

Good Luck,

Cheers!