element-ui水平菜單el-menu：pc端與移動端適配及標簽大小調整
Element-UI的el-menu組件功能強大，但在PC端和移動端的適配上，開發者常常需要額外處理。本文將探討mode=”horizontal”模式下，如何調整菜單標簽大小，以及如何處理PC端懸停展開、移動端點擊展開的差異。
問題：
使用mode=”horizontal”的el-menu，在PC端，菜單項懸停展開，離開關閉，符合預期。但在移動端，此交互失效，需點擊展開子菜單，點擊其他區域關閉。此外，開發者也希望能夠調整菜單標簽大小。
代碼示例：
以下代碼展示了一個包含一級和二級菜單的水平el-menu。PC端正常，但移動端子菜單展開/關閉需要點擊操作。
<el-menu :ellipsis="ellipsis" active-text-color="#ffd04b" background-color="#1b80e9" class="el-menu-demo" mode="horizontal" ref="menu" text-color="#fff"> <el-menu-item index="0"> <a target="_blank">首頁</a> </el-menu-item> <el-menu-item index="1"> <a target="_blank">活動消息</a> </el-menu-item> <el-sub-menu index="2"> <template #title>全民健身</template> <el-menu-item index="2-1">游泳館簡介</el-menu-item> <el-menu-item index="2-2">收費公示</el-menu-item> <el-menu-item index="2-3">服務人員公示</el-menu-item> <el-menu-item index="2-4">規章制度公示</el-menu-item> </el-sub-menu> </el-menu>
methods: { handleOpen(key, keyPath) { console.log("open: key=" + key, "keyPath=" + keyPath); }, handleClose(key, keyPath) { console.log("close: key=" + key, "keyPath=" + keyPath); } }
解決方案：
.el-menu-demo .el-menu-item { font-size: 14px; padding: 0 15px; }
- 移動端適配： el-menu在移動端自動切換為點擊展開模式，這是其響應式設計的一部分，并非錯誤。若需在移動端保持PC端的懸停效果，需自定義組件或考慮其他UI庫。 可以使用媒體查詢根據屏幕寬度調整樣式，例如：
@media (max-width: 768px) { .el-menu-demo { /* 移動端樣式 */ } }
通過CSS樣式調整和響應式設計，可以有效解決el-menu在不同設備上的顯示和交互問題，從而提升用戶體驗。 如果需要更復雜的交互邏輯，則需要考慮自定義組件或使用其他更靈活的UI組件。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
