ElementUI中el-dropdown-item点击事件无效怎么解决

发布时间:2023-04-24 17:04:46 作者:iii
来源:亿速云 阅读:256

这篇文章主要讲解了“ElementUI中el-dropdown-item点击事件无效怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ElementUI中el-dropdown-item点击事件无效怎么解决”吧!

ElementUI中el-dropdown-item点击事件无效

若直接在el-dropdown-item上添加click事件,点击后没有任何反应。

在click后添加native修饰符,则可解决问题。

代码如下:

<el-dropdown>
    <span class="user"></span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

在给Vue组件(el-dropdown-item就是一个组件)绑定事件的时候,必须加上navtive修饰符才能生效,navtive可以监听根元素的原生事件

el-dropdown-item添加点击事件

问题

Vue引入Element-ui框架,使用其DropDown组件时,发现官网教程并没有给出el-dropdown-item点击事件的使用方法。

因此需要自定义点击事件,也就是需要添加原生的点击事件。

添加点击事件

使用 @click.native=“”,此时就可以实现点击事件了。

<el-dropdown>
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="handleClick('0')">黄金糕</el-dropdown-item>
    <el-dropdown-item @click.native="handleClick('1')">狮子头</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

了解一下@click.native

@click 常见于其用在Vue中的事件绑定,而@实际上是 v-on 的简写,而 v-on 则是对 vue 的事件体系封装之后的 API接口。

native修饰符用于处理DOM原生事件,在本文中由于组件 DropDown并没有封装点击事件,因此需要添加原生的点击事件,因此使用@click.native。

扩展@click的其他用法

感谢各位的阅读,以上就是“ElementUI中el-dropdown-item点击事件无效怎么解决”的内容了,经过本文的学习后,相信大家对ElementUI中el-dropdown-item点击事件无效怎么解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. Vue结合ElementUI实现换肤功能的实例
  2. Vue和Element UI如何实现下拉菜单的封装

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

elementui

上一篇:Vue3 JSX解释器怎么实现

下一篇:基于Vue3怎么实现日历组件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》