【无标题】el-dropdown-item @click.native无效

最新推荐文章于 2024-04-28 17:35:14 发布

qq_54358705

最新推荐文章于 2024-04-28 17:35:14 发布

阅读量291

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_54358705/article/details/130694875

版权

这种情况改为@click.native即可。代码如下

<el-dropdown-item @click.native="handleClick">
   <span>点我</span>
</el-dropdown-item>

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

注意不要把点击事件添加到el-dropdown-item包裹的元素上了（上述代码中的span），不然点击span以外的区域也莫得反应

作者：Bouc
链接：https://www.jianshu.com/p/f42c5f93c432
来源：简书

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_54358705

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

Suzerk的博客

07-27

1108

在学习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()

Dropdown 下拉菜单中点击事件失效 el-dropdown-item 内的 @click点击无效

AmbroseLe

04-06

2073

第一种就是把@click 改为 @click.native 如果不行的话就使用指令@command 写法 <el-dropdown trigger="click" @command="handleCommand" placement="bottom-end" style="margin-left: 10px" > <spa.

参与评论您还未登录，请先登录后发表或查看评论

解决：element-ui 下拉菜单el-dropdown-item添加点击事件@click无效

weixin_58622844的博客

03-21

1382

element-ui 下拉菜单el-dropdown-item添加点击事件@click无效

el-dropdown-item @click事件无效

yell7810的博客

05-18

637

el-dropdown-item @click事件点击无效一开始在里面包裹了一层<label>，在label里面添加click事件，然后发现只有在点击文字的时候才能触发，实际效果不怎么样搜了一下，最好的解决办法应该是@click.native，如果不需要穿参的话其实也可以用官方自带的方法command ...

在vue组件中添加click事件无效，@click.native也无效

weixin_71588037的博客

11-08

2819

在vue组件中添加click事件无效，@click.native也无效

elementUI组件 el-dropdown-item添加点击事件无反应

Lucky_Buff的博客

12-25

604

事件，但是这个事件被 Vue 当作一个普通的 DOM 事件处理，而不是一个自定义的组件事件。表示监听组件根元素的原生 DOM 事件，而不是组件内部的事件。默认情况下，Element UI的下拉菜单组件包含了一个。修饰符来监听点击事件。

@click失效？@click.native

typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。

09-21

2312

是因为使用.native之后父级组件可以像处理原生的DOM事件一样通过 v-on 监听子组件实例的任意事件(@即为v-on:的简写)，如果不加natvie，会认为监听的是来自子组件自定义的事件，然而子组件内也没有使用$emit()来将子组件的触发事件抛出，因此onSubmit()方法没有执行。newsbox是我自己封装的一个组件，问题就出在这儿，newsbox是子组件，想要直接在父组件触发click方法，直接写上@click是不能触发方法的。你可能想在某个组件的根元素上监听一个原生事件。

<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

7. `<el-dropdown-menu slot="dropdown">`：定义了下拉菜单的内容，使用了 Element UI 的 `<el-dropdown-menu>` 组件，`slot="dropdown"` 表示该内容插入到 `<el-dropdown>` 组件的 `dropdown` 插槽中。 8. `...

<el-dropdown-item divided @click.native="logout"> <span style="display:block;">退出登录</span>

05-12

这段代码是一个基于Element UI框架的下拉菜单组件(el-dropdown)中的一个子组件(el-dropdown-item)，其中divided属性表示该项与其它项之间添加分割线，@click.native="logout"表示点击该项时会触发一个名为logout的...

<template> <div style="display: flex;line-height: 50px;"> <div style="margin-top: 8px;"> <i class="el-icon-s-fold" style="font-size: 20px;cursor: pointer;" @click="collapse"></i> </div> <div style="flex: 1;text-align: center;font-size: 34px;line-height: 65px"> <span>欢迎来到仓库管理系统</span> </div> <el-dropdown> <i class="el-icon-user" style="font-size:25px ; margin-right: 10px ; line-height: 70px" ></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="toUser">个人中心</el-dropdown-item> <el-dropdown-item @click.native="logOut">退出</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </template>为什么其中<i class="el-icon-user" style="font-size:25px ; margin-right: 10px ; line-height: 70px" ></i>这行代码加入<span>{{ user.name }}</span>无法运行

06-09

因为在这个代码段中，使用了标签来显示用户图标，而这个标签是不支持包含其他标签的。...<i class="el-icon-user" style="font-size:25px ; margin-right: 10px ; line-height: 70px"></i>{{ user.name }}</span>

vue @click失效？@click.native

草叶儿的博客

01-11

1679

今天写vue用的iview的组件，Tag。但是，@click事件不好使了，然后，对应的解决方案是：用@click.native <Tag color=“warning” v-else-if=“row.endStatus==4” @click.native=“lookDetail(row)”>一个标签 1，给vue组件绑定事件时候，加上native ，否则会认为监听的是来自Item组件自定义的事件 2，等同于在子组件中：子组件内部处理click事件然后向外发送click事件：$emit(“cl

el-dropdown-item的点击事件无效

Noctis99的博客

10-21

851

Element u中el-select、el-row、el-dropdown-item等等标签添加@click事件无效解决方法

qq_42483780的博客

04-12

1039

如下： <el-row @click.native="handle"></el-row> //js handle(){ console.log('我生效啦') } 重点：在@click后加上.native 原因：vue封装@click这些方法时阻止了原生的DOM事件，而native就是释放DOM原生事件。

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

m0_47147246的博客

04-06

3469

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&gt

今天遇到的bug——vue组件中添@click失效

m0_47807991的博客

04-14

3033

今天遇到了一个非常蠢的bug，在vue组件中添加click事件无效，@click.native也无效想添加一个click事件来切换歌曲 <div class="playlist"> <div class="playItem" v-for="(item,i) in playlist.tracks" :key="item.id" @click="setPlayIndex(i)"></div> </div> 结果click事件一直无效，试了@cli

Dropdown 下拉菜单 el-dropdown-item绑定事件(native)

weixin_65019617的博客

08-22

618

修饰符来绑定事件，是因为它内部已经处理了原生事件和自定义事件的绑定方式。是一个自定义的组件，它并不是一个原生的HTML元素，所以当你想在。修饰符来告诉Vue将事件绑定到根元素上。上绑定原生事件时，你需要使用。

Vue中@click事件无效？@click.native中.native的含义和使用

weixin_44370837的博客

01-25

9128

记录@click绑定事件的一个坑问题描述：今天开发的时候，给组件绑定了@click事件，但是事件却没有执行。代码如下： <template> <div> <span>父组件页面</span> <search @click="onSubmit"></search> </div> </template> <script> methods: { onSubmit() { alert('sh

Vue组件点击事件不触发的问题，添加事件修饰符native解决

在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。

03-04

8078

相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。

el-dropdown-item 上添加 @click 事件监听器,不触发，分析