【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时,子菜单需要点击两次才会隐藏的问题

【Element Plus】解决移动设备使用 <el-menu><el-sub-menu> 时,子菜单需要点击两次才会隐藏的问题

html 复制代码
<el-menu
	class="custom-menu"
	mode="horizontal"
    background-color="#fff"
    text-color="black"
    active-text-color="#0aa3ba"
    @select="handleSelect"
    popper-class="lang-menu-mobile"
>
	<!-- 其余菜单选项略 -->
	<el-sub-menu index="1" class="el-nav1">
		<template #title>
			<div>{{ currentLanguage === 'zh' ? '中文' : 'EN' }}</div>
		</template>
		<el-menu-item @click="changeLanguage('zh')">
            <span>简体中文</span>
		</el-menu-item>
		<el-menu-item @click="changeLanguage('en')">
            <span>English</span>
		</el-menu-item>
	</el-sub-menu>
</el-menu>

在以上代码中,我就出现了当使用移动设备浏览页面时,子菜单需要点击两次才会隐藏的问题。

问题原因: Element Plus 的 el-menu 在水平模式(mode="horizontal")下,默认通过 hover 触发子菜单弹出。移动端没有 hover 事件,点击会先触发 "hover 态" 打开子菜单,第二次点击才会触发真正的点击事件(关闭子菜单),所以会出现需要两次点击才隐藏子菜单的问题。

解决办法:<el-menu> 中加上 menu-trigger="click" ,将子菜单的触发方式改为通过点击事件触发。这样修改之后子菜单将点击一次打开,再次点击关闭,这样就成功修复了子菜单需要点击两次才会隐藏的问题,符合移动端交互习惯,如下:

html 复制代码
<el-menu
	class="custom-menu"
	mode="horizontal"
    background-color="#fff"
    text-color="black"
    active-text-color="#0aa3ba"
    @select="handleSelect"
    popper-class="lang-menu-mobile"
    menu-trigger="click"
>
	<!-- 其余菜单选项略 -->
	<el-sub-menu index="1" class="el-nav1">
		<template #title>
			<div>{{ currentLanguage === 'zh' ? '中文' : 'EN' }}</div>
		</template>
		<el-menu-item @click="changeLanguage('zh')">
            <span>简体中文</span>
		</el-menu-item>
		<el-menu-item @click="changeLanguage('en')">
            <span>English</span>
		</el-menu-item>
	</el-sub-menu>
</el-menu>
相关推荐
musk12127 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架