Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件,解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发,会连带触发外层包裹容器的点击事件

前言

平常只需要给 @click 事件加入即可,但现在使用 stop 修饰符无法支持和识别 语法。

本文 实现了在 vue3 + element plus 项目开发中,解决 el-dropdown 下拉菜单组件时点击事件冒泡问题(激活触发外层嵌套元素的点击事件,从而同时触发),使用 .stop 修饰符又没有地方可以加入的问题。

本文提供完美解决方案,保证 100% 解决。


如下图所示,常见于这种需求页面,点击 “···” 图标时就会引发点击事件冒泡,自动触发外层事件。

详细示例代码,无论 js/ts 都能使用!

Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件,解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发,会连带触发外层包裹容器的点击事件_第1张图片

示例代码

提供给您完整的示例代码及注释,请直接进行复制。

你可能感兴趣的:(+,Vue3,element,plus,el-dropdown,vue3,把command加上.stop,下拉菜单组件如何点击不冒泡,stop事件修饰符阻止点击冒泡,click.stop无法使用)