Element-UI el-menu component: How to adjust the size of menu labels and control the display of submenu in different modes?

Element-UI el-menu component: Customize menu label size and pattern behavior

This article discusses the el-menu component in the Element-UI framework, focusing on how to adjust the menu label size and control the display behavior of the submenu in different mode modes. The problem encountered by users is: in mode="horizontal" mode, the PC side mouse hoveres over to display the submenu, and closes when leaving; but on the mobile side, you need to click to expand and close, which is inconsistent with expectations.

First, el-menu itself does not directly provide attributes to adjust the size of the tag text. Need to be controlled through CSS style:

1. Global Style: Add global CSS style to the project, for example:

 .el-menu-item {
  font-size: 16px; /* Custom size*/
}

This will affect all el-menu-item elements.

2. Local style: For a specific el-menu-item , add class and modify the style:

<el-menu-item class="custom-menu-item" index="0"> front page</el-menu-item>

 .custom-menu-item {
  font-size: 18px;
}

This controls each menu item more accurately.

Secondly, the different behaviors of PC and mobile terminals in mode="horizontal" mode are the default design of Element-UI. The PC side uses hover trigger, and the mobile side uses click trigger, which is to optimize the user experience of different devices. Not a bug.

If you want to force hover triggering on the mobile side, you need to use JavaScript to listen for touch events and simulate mouse hover, but this will increase complexity and is not recommended. It is recommended to follow the habits of mobile users and use click triggering.

@open and @close events in the code are used to monitor the menu status, but they cannot directly change the interaction method of the mobile terminal. For the best mobile experience, it is recommended to retain the default click trigger mechanism of Element-UI.

The above is the detailed content of Element-UI el-menu component: How to adjust the size of menu labels and control the display of submenu in different modes?. For more information, please follow other related articles on the PHP Chinese website!