element UI中下拉菜单的el-dropdown-item无法触发click事件怎么解决？

流落的小鬼

已于 2022-12-06 14:17:00 修改

阅读量3.6k

点赞数 14

于 2022-04-06 20:40:45 首次发布

本文链接：https://blog.csdn.net/m0_47147246/article/details/123999358

版权

笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文讲述了如何在Element UI的下拉菜单中，由于el-dropdown非原生DOM特性导致的click事件不触发问题，通过添加.native修饰符将自定义事件转换为原生DOM事件，以便正确监听和处理'退出登录'操作。

摘要由CSDN通过智能技术生成

element UI中下拉菜单的el-dropdown-item无法触发click事件怎么解决？（关于自定义事件的问题）

<el-dropdown class="infor" size="medium">  
	<span>
	     <i class="el-icon-more-outline"></i>
	 </span>
	 <el-dropdown-menu slot="dropdown">
	     <el-dropdown-item>修改密码</el-dropdown-item>
	     <el-dropdown-item>更改头像</el-dropdown-item>
	     <el-dropdown-item @click.native="signOut()">退出登录</el-dropdown-item>
	 </el-dropdown-menu>
</el-dropdown>

el-dropdown不是原生DOM节点，而此时绑定的click也非原生DOM事件，加上.native可以把自定义事件转变为原生的DOM事件，即给父元素的子节点们都加上这个click事件。
大概就是说这个el-dropdown不是自家人，native相当于给了它权限来使用家里的东西。
将@click改为@click.native进行监听即可。