点击el-dropdown-item/@click.native

最新推荐文章于 2024-03-19 14:20:00 发布
最新推荐文章于 2024-03-19 14:20:00 发布
阅读量1k 收藏 1
点赞数 3
分类专栏： web前端 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Suzerk/article/details/119142805
版权
在Vue和Element UI的结合使用中，遇到el-dropdown-item点击事件处理问题。默认情况下，直接在el-dropdown-item上绑定@click.native无法生效。解决方法是需在父组件的@command事件中监听。
摘要由CSDN通过智能技术生成

在学习vue使用element组件的时候经常会用到Dropdown 下拉菜单，对于点击el-dropdown-item的事件触发跳转@click="logout()"是不行的，给一个vue组件绑定事件时候，要加上native。

<el-dropdown-item divided="true" @click.native="logout()"
                    >Log Out</el-dropdown-item>

methods: {
   
    logout() {
最低0.47元/天 解锁文章
Suzerk
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui@2.15.9 cdn资源
08-09
<el-button type="primary">主要按钮</el-button> ``` `type="primary"` 是按钮的类型，Element UI 还支持其他类型，如 "default"、"success"、"warning" 和 "danger"。 总的来说，Element UI 是一个强大且易于...
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue-路由跳转(引用el怎么跳转路由+路由伸缩)
weixin_45969142的博客
12-31 1587
老实讲刚学路由跳转的时候，人都是傻的。感觉懵的很。等自己了解的差不多的时候，又发现挺简单的。自己就简单的把路由跳转给演示一下吧！附上源码。 前提：我用的编译环境是vue脚手架,node.js。 main.js import Vue from 'vue' import App from './App.vue' import axios from 'axios' //路由的关键 import router from './router' // ElementUI 框架 import ElementUI from
ElementUI导航菜单通过路由实现页面跳转
kepler星球的博客
03-07 5244
1.index.vue <template> <div> <el-container> <!-- 左边导航栏 --> <el-aside width="250px"> <div class="main"> <aside class="aside"> <!--导航菜单--> &l...
el-dropdown-item的点击事件
angula
01-03 5135
在vue项目中使用element-ui时，用到了Dropdown组件。 需要在子菜单上添加click事件。但是使用@click添加点击事件并没有产生效果，毫无反应。 但是官方文档中并没有给出el-dropdown-item的点击事件。 在经过多般测试之后，找到解决问题方法 若在click后添加native修饰符，则可解决问题。 如下所示 <el-dropdown> <el-button type="primary"
vue事件修饰符.native
cmhahaha的博客
08-11 1751
问题 在写代码时我注意到click事件的native修饰符，如下： <el-dropdown-item divided @click.native="logout"> <span style="display:block;">退出登录</span> </el-dropdown-item> 请问这里的native是什么，有什么用？对于自定义的组件，如果添加@click而不加.native，我们点击这个组件，logout会执行吗？带着以上问题我..
el-dropdown-item添加点击事件
m0_73687324的博客
03-20 1899
【代码】el-dropdown-item添加点击事件。
vant 自定义 van-dropdown-item的用法
10-15
本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 Vant UI 中的一个下拉菜单组件，通常用于展示一个可折叠的选项列表。在默认情况下，`van-dropdown-...
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
Vue实现登陆跳转
热门推荐
ying940718的博客
04-03 3万+
不说废话，先上效果图~ 具体的实现方法，参照以下步骤~ 创建login.vue，绘制login画面，添加跳转事件。 <template> <div class="login-container"> <el-form :model="ruleForm2" :rules="rules2" status-icon ...
vue3通过el-dropdown实现动态菜单切换页面
青莳的博客
11-29 1502
接下来是菜单页面menu.vue。首先是主页index.vue。
如何在 Vue 项目中解决 el-dropdown-item 点击无效的问题
weixin_55932347的博客
11-29 1652
当在 Vue 项目中遇到 el-dropdown-item 点击无效的问题时，可以通过在 @click 后添加 .native 来解决。
Dropdown 下拉菜单 el-dropdown-item绑定事件(native)
weixin_65019617的博客
08-22 568
修饰符来绑定事件，是因为它内部已经处理了原生事件和自定义事件的绑定方式。是一个自定义的组件，它并不是一个原生的HTML元素，所以当你想在。修饰符来告诉Vue将事件绑定到根元素上。上绑定原生事件时，你需要使用。
element-ui点击el-dropdown-item后，el-dropdown-menu二次触发显示的问题
qq_21597979的博客
06-07 1544
工作中遇到的问题，点击el-dropdown-item，打开新页面后，menu再次触发显示。 触发菜单显示到点击选项期间，鼠标会经过这之间的红色区域，它不属于dropdown，所以此时会先触发hide，再次触发show，show默认是250ms的延时，所以当这个过程鼠标过快时，会发生二次显示的情况。我的解决办法就是 继承原来的代码，重写点击选项的方法，再触发点击后清除定时器clearTimeout(this.timeout)，这样就可以了。
@click.native的用法
zhtxilyj的博客
03-22 413
正常情况下点击事件用@click，但是如果是自定义组件的父组件如果想要点击事件就需要用到@click.native了，因为自定义组件本身没有点击事件。正常情况下父组件newzujian 添加点击事件@click="click"并不会生效，但是@click.native="click"是可以生效的。
el-dropdown-item点击事件需要加native
最新发布
m0_63034063的博客
03-19 123
el-dropdown-item @click.native="uploads(2)">电厂中层干部信息</el-dropdown-item><el-dropdown-item @click.native="uploads(1)">员工基本信息</el-dropdown-item>
elementUI组件 el-dropdown-item添加点击事件无反应
Lucky_Buff的博客
12-25 555
事件，但是这个事件被 Vue 当作一个普通的 DOM 事件处理，而不是一个自定义的组件事件。表示监听组件根元素的原生 DOM 事件，而不是组件内部的事件。默认情况下，Element UI的下拉菜单组件包含了一个。修饰符来监听点击事件。
el-dropdown绑定click点击事件不生效和样式修改
x_XDGS的博客
04-08 2653
el-dropdown绑定click点击事件不生效和样式修改 我们在开发项目的时候会用到el-dropdown，这个功能一般都会在用户上进行使用 比如： 修改密码，退出的情况下 绑定点击事件 组件直接绑定点击事件是不生效的，需要通过 @click.native=‘logout’ 这种方式来进行绑定点击事件。 修改样式 先看图： 这个组件的DOM不在#app里面，和#app是同级关系。 如果我们要修改组件样式的话，我们就不能再style上加scoped，必须全局修改，这样就会出现一个情况：我们在其他地方使
【无标题】el-dropdown-item @click.native无效
qq_54358705的博客
05-15 268
在给Vue组件（el-dropdown-item就是一个组件）绑定事件的时候，必须加上navtive修饰符才能生效，navtive可以监听根元素的原生事件。注意不要把点击事件添加到el-dropdown-item包裹的元素上了（上述代码中的span），不然点击span以外的区域也莫得反应。链接：https://www.jianshu.com/p/f42c5f93c432。这种情况改为@click.native即可。
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> <div class="avatar-wrapper"> <img :src="avatar" class="user-avatar"> <i class="el-icon-caret-bottom" /> </div> <el-dropdown-menu slot="dropdown"> <router-link to="/user/profile"> <el-dropdown-item>个人中心</el-dropdown-item> </router-link> <el-dropdown-item @click.native="setting = true"> <span>布局设置</span> </el-dropdown-item> <el-dropdown-item divided @click.native="logout"> <span>退出登录</span> </el-dropdown-item> </el-dropdown-menu> </el-dropdown>解释这段代码的含义以及每个标签的含义
06-03
`<el-dropdown-item divided @click.native="logout">`：定义了一个下拉菜单项，使用了 Element UI 的下拉菜单项组件，`divided` 属性表示该菜单项显示一个分隔线，`@click.native="logout"` 表示定义了一个点击事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值