el‐menu - daniel-qa/Vue GitHub Wiki

el-menu

  • 樣式

  • 程式
<el-menu :default-active="activeMenu"
         mode="horizontal"
         @select="handleMenuSelect"
         background-color="#f5f5f5"
         text-color="#333"
         active-text-color="#409EFF"
         style="border-bottom: 1px solid #e0e0e0;">
    <el-menu-item index="1">{{ t('systemConfig.pushmsg.selectByArea') }}</el-menu-item>
    <el-menu-item index="2">{{ t('systemConfig.pushmsg.selectByGeo') }}</el-menu-item>
    <el-menu-item index="3">{{ t('systemConfig.pushmsg.selectByUnit') }}</el-menu-item>
    <el-menu-item index="4" v-if="msgType === 'notify'">{{ t('systemConfig.pushmsg.selectByLang') }}</el-menu-item>
</el-menu>
  • 說明
改動 說明
mode="horizontal" 切換成橫向模式
可選：加背景色、底線 用 background-color 和 border-bottom 做分隔感
可選：Sticky 效果 用 position: sticky; top: 0; 讓選單固定頂部
可選：item 間距優化 用 CSS 微調 .el-menu--horizontal > .el-menu-item
⚠️ **GitHub.com Fallback** ⚠️