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

已于 2022-12-06 14:17:00 修改
阅读量3.4k 收藏 5
点赞数 12
文章标签： javascript vue.js elementui 前端
于 2022-04-06 20:40:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47147246/article/details/123999358
版权
本文讲述了如何在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进行监听即可。

流落的小鬼
关注
  • 12
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用VUE下拉框组件el-dropdown-item，设置click点击事件，会触发两次
qq_42955997的博客
04-07 7417
项目场景： 毕设项目 问题描述 问题帖链接：https://ask.csdn.net/questions/7683469?answer=53747393&username=qq_42955997 原因分析： 使用的组件是elementplus的el-dropdown下拉框组件，官方并没有提供@click的方法，所以可能出现一些未知的问题。 解决方案： 这里官方提供了一个方法叫commond，官方说明是“点击菜单项触发的事件回调”，这正是我们需要的。解决方式参考帖子：https://blog.csdn
element UI对el-dropdown的二次封装（三级下拉框）
weixin_43238931的博客
11-09 1161
<template> <el-dropdown trigger="click" :hide-on-click="true"> <el-button> <svg-icon :icon-class="iconClass" class-name="icon-svg" /> <span>{{ text }}</span> <i class="el-
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
主要介绍了Element-ui中元素滚动时el-option超出元素区域的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui 下拉菜单el-dropdown-item添加点击事件
Zing_ing的博客
06-25 988
native修饰符用于处理DOM原生事件，由于组件 DropDown并没有封装点击事件，因此需要添加原生的点击事件，因此使用@click.native。@click 常见于其用在Vue中的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口。使用element-ui下拉菜单组件Dropdown时绑定点击事件，事件不生效。
el-dropdown-item @click事件无效
csdn_zhuang的博客
12-09 598
<el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="viewAccountHandle()">账户信息</el-dropdown-item> <el-dropdown-item @click.native="modifyPwd...
el-dropdown-item的点击事件无效
Noctis99的博客
10-21 842
e
elementui 下拉框组件（el-dropdown）绑定点击事件不生效
weixin_45898996的博客
02-09 1113
elementui 下拉框组件（el-dropdown）如何绑定点击事件
解决vue中使用elementUI中el-dropdown下拉el-dropdown-item添加点击事件click没有反应的问题
minx_6688的博客
07-31 4395
通过给click事件添加.native解决 原代码 //添加点击click事件不生效 <el-dropdown-item @click="remoToken">退出</el-dropdown-item> 修改后的代码 //可以生效 <el-dropdown-item @click.native="remoToken">退出</el-dropdown-item> ...
解决element-ui中下拉菜单子选项click事件不触发的问题
10-18
在使用Vue框架结合Element-UI组件库开发中，我们可能会遇到下拉菜单中子选项的click事件无法触发的问题。Element-UI是一个基于Vue 2.0的桌面端组件库，广泛用于快速开发页面组件。其中，<el-dropdown>组件提供了下拉...
Element Dropdown下拉菜单的使用方法
10-15
在上述代码中，`<el-dropdown>` 包裹了触发下拉菜单的元素（这里是 `span`），`<el-dropdown-menu>` 内包含了下拉菜单的各个选项。`el-icon-arrow-down` 是用于展示下拉箭头的图标。 ### 触发对象 Dropdown 可以与...
Vue使用ElementUI的el-dropdown点击事件问题
热门推荐
qq_41383941的博客
04-06 1万+
Vue使用ElementUI的el-dropdown点击事件问题el-dropdown介绍问题重述问题解决后续 el-dropdown介绍 el-dropdown是ElementUI提供的响应式的实现下拉菜单的功能组件。详细用法可见官方说明文档：https://element.eleme.cn/#/zh-CN/component/dropdown 问题重述 我在实现下拉菜单的时候，在el-dropdown-item添加点击事件发现定义的事件无法被正常触发。 下面是我的代码： <el-dropdown&
解决：element-ui 下拉菜单el-dropdown-item添加点击事件@click无效
weixin_58622844的博客
03-21 1273
element-ui 下拉菜单el-dropdown-item添加点击事件@click无效
ElementUI中el-dropdown-item点击没反应
Dj_Fairy的博客
10-27 274
在click是事件上.native。
elementUI中下拉菜单组件el-dropdown绑定点击事件
abc234ABC的博客
02-18 2383
1、el-dropdown下拉菜单中添加点击事件@click无效 2、需要添加@click.native <el-dropdown trigger="click"> <span class="el-dropdown-link" style="color:white">分类<i class="el-icon-arrow-down el-icon--right"></i></span>
ElementUI中Dropdown 下拉菜单el-dropdown-item 点击事件无效
Yjx的博客
08-10 5439
ElementUI
如何在 Vue 项目中解决 el-dropdown-item 点击无效的问题
weixin_55932347的博客
11-29 1823
当在 Vue 项目中遇到 el-dropdown-item 点击无效的问题时，可以通过在 @click 后添加 .native 来解决。
【无标题】el-dropdown-item @click.native无效
qq_54358705的博客
05-15 284
在给Vue组件（el-dropdown-item就是一个组件）绑定事件的时候，必须加上navtive修饰符才能生效，navtive可以监听根元素的原生事件。注意不要把点击事件添加到el-dropdown-item包裹的元素上了（上述代码中的span），不然点击span以外的区域也莫得反应。链接：https://www.jianshu.com/p/f42c5f93c432。这种情况改为@click.native即可。
element-ui中下拉菜单子选项click事件不触发问题
MYuanFang的博客
06-27 4263
发现在组件里写入@click事件是无效的在click后面加上 .native ，要使用@click.native=”delData()”才行，.native代表原生点击事件。
el-avatar结合el-dropdown-menu实现下拉菜单
最新发布
08-27
`el-avatar` 和 `el-dropdown-menu` 是 Element UI 组件库中的两个组件，分别用于显示用户头像和下拉菜单。将这两个组件结合起来实现下拉菜单，通常是想要在点击头像时显示一个包含多个选项的下拉菜单，以便用户进行选择。 以下是结合使用 `el-avatar` 和 `el-dropdown-menu` 实现下拉菜单的基本步骤： 1. 首先确保你的项目中已经安装并引入了 Element UI。 2. 在你的组件中添加一个 `el-dropdown` 标签，并设置其 `trigger` 属性为触发下拉菜单的方式，如 `click` 或 `hover`。 3. 在 `el-dropdown` 内部，将 `el-avatar` 组件添加进去作为触发元素。 4. 然后添加 `el-dropdown-menu` 和 `el-dropdown-item` 组件来定义下拉菜单的内容和选项。 下面是一个简单的代码示例： ```html <template> <el-dropdown trigger="click"> <el-avatar slot="reference" size="large" :src="avatarUrl">U</el-avatar> <el-dropdown-menu slot="dropdown" class="dropdown-menu"> <el-dropdown-item>选项1</el-dropdown-item> <el-dropdown-item>选项2</el-dropdown-item> <el-dropdown-item>选项3</el-dropdown-item> <!-- 更多选项 --> </el-dropdown-menu> </el-dropdown> </template> <script> export default { data() { return { avatarUrl: 'your-avatar-url.jpg' // 头像图片地址 }; } }; </script> <style scoped> /* 你可以在这里添加一些样式来美化你的下拉菜单 */ .dropdown-menu { width: 150px; } </style> ``` 在这个示例中，点击头像将会触发下拉菜单，并显示三个选项。你可以根据需要添加更多的 `el-dropdown-item` 来增加更多的菜单选项。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值