点击el-card区域触发事件，点击button区域，阻止冒泡 ​

最新推荐文章于 2025-01-13 09:37:08 发布
原创 最新推荐文章于 2025-01-13 09:37:08 发布 · 3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍在Vue.js框架中如何实现点击el-card组件触发事件，同时在点击button组件时阻止事件冒泡，通过使用$event.stopPropagation()方法来达到这一目的。此技巧对于避免父级组件误响应子组件内部事件特别有用。

实现的功能，点击el-card区域触发事件，点击button区域，阻止冒泡 ​​​​

获取当前的事件$event

   @click="deleteNotice(listData.index,$event)"

按钮
deleteNotice(index,e){//删除该通知
e.stopPropagation()
},

el-button鼠标悬浮时显示按钮，鼠标移开隐藏
卡拉米
08-02 1296
组件本身并不直接支持鼠标悬浮时显示、鼠标移开时隐藏的功能，因为这种需求更偏向于显示隐藏控制，而不是按钮的固有属性。不过，你可以通过结合 CSS 和 Vue 的条件渲染（虽然在这个场景下可能不是必需的，但了解如何结合使用总是好的）来实现这一效果。伪类来改变按钮的样式或显示额外的信息（如工具提示），而不是直接隐藏和显示按钮本身。然而，更常见的做法是使用 CSS 的。在 Element UI 中，
elementUI点击el-card选中边框变色
weixin_43589681的博客
07-30 1245
每个 el-card 绑定了 @click 事件，当点击卡片时，会调用 selectCard 方法并传递当前卡片的索引。要实现当选中某一个卡片时其边框颜色变色，你可以通过 Vue 的状态管理和条件绑定类来实现。使用 :class 绑定，根据 selectedCardIndex 的值来应用 is-selected 类。selectCard 方法更新 selectedCardIndex，从而更新选中的状态。.is-selected 类定义了选中时的边框颜色。knowledgeList 数组保存卡片的数据。
使用element 卡片el-card设置阻止冒泡点击事件
11-13 1219
最开始使用@click=“hand” 在hand方法里边设置阻止冒泡事件 报错:Cannot set property bubbles of #<Event> which has only a getter 只能获取不能修改属性 解决方法:@click.self="hand",阻止冒泡
点击卡片内部的按钮会触发卡片本身的点击事件
m0_56390097的博客
09-28 1041
卡片内部按钮会触发卡片的点击事件
el-card可点击放到最大（占满屏幕）功能实现(包含退出次数，考试系统可能会使用到，一共四步)
zwjl1017的博客
03-24 1741
v2+element ui占满屏幕功能实现
ElementUI Card组件触发点击事件
qq_45228330的博客
12-20 9814
遇到的问题： 在做卡片点击改变样式时发现el-card组件点击方法没有触发到。 解决方式： @click = method(x,y)替换成@click.native = method(x,y) 参考链接: https://blog.youkuaiyun.com/weixin_43937526/article/details/120410660.
vue阻止冒泡
Sunshinedada的博客
11-16 3505
vue阻止冒泡 在事件后面加上.stop <el-button type="primary" size="small" @click.stop="editgGift()">编辑</el-button >
解决el-card上绑定@click事件，点击无效
qq_45854695的博客
11-29 1645
elemnetUI组件el-card上绑定@click事件，点击无效
el-card点击事件 按钮
最新发布
03-19
### 实现 `el-card` 组件内按钮绑定点击事件的方法 在 Element-UI 的 `el-card` 组件中，如果需要为内部的按钮绑定点击事件，可以直接通过 Vue.js 的标准事件绑定语法来实现。具体来说，在 `<button>` 或者 `<el-...
【按钮防抖】el-button和普通按钮防抖，点击一次禁用一秒再恢复
seeeeeeeeeee的博客
01-13 543
右边普通按钮通过自定义指令控制，这里自定义指令写法是html版本的。左边是组件按钮，通过disabled控制。点击后的效果，一秒后会恢复可点击。
el-card 长按事件
04-10
在 el-card 中添加长按事件可以通过以下步骤实现： 1. 首先，在 el-card 上添加一个自定义属性，例如 `@contextmenu`，用于监听右键菜单事件。 2. 在对应的方法中，可以通过判断事件类型来实现长按事件的逻辑。例如...
阻止冒泡element按钮点击操作阻止@row-click
weixin_43550562的博客
06-18 2558
阻止冒泡element按钮点击操作阻止@row-click
vue中阻止事件冒泡
DyP__优快云的博客
09-06 1789
vue阻止事件冒泡 问题描述： 使用的element-ui的dialog对话框，在对话框的父组件还有点击事件，点击dialog对话框时也会相应外部父组件的点击事件。 <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" > <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <
element collapse组件阻止冒泡/不响应折叠
qq_17627195的博客
11-20 2011
例如：如果是个 el-button 使用 @click.native.stop="aaa()" 就可以了 <el-button type="danger" size="mini" @click.native.stop="aaa()">按钮</el-button>
elementUI点击el-card选中变色，且点击别的空白处不变色
HD243608836的博客
01-09 2495
其实这里的也可以换成普通的标签，只需要给该指定好一个css即可。的方法，而不是我们想调用的原生click方法。（具体查看“@”在vue标签中的应用）其中el-card是自带的css样式，浏览器F12开发者模式可查。@click.native是在vue中，避免vue父模块调用成了vue成子模块中的。（普通元素类似input或button按钮不用。由于div不支持:focus伪类，可通过增加。="1"，直接使用:focus）属性使其支持css伪类。
vue中el-card实现选中效果改变css
Smile_Joe的博客
04-24 4270
实现选中选中效果 @click.native="selectClick(index)" :class="{active:selectIndex==index}" data：中 //体现选中效果 selectIndex:-1 css .active{ background-color:#ffffff!important; border:1pxsolid#409EFF; }...
vue 中el-card点击事件失效解决
weixin_34403976的博客
09-11 1883
click后面加 .native @click="open(0) //替换为 @click.native="open(0) @click.native 的作用：给组件绑定原生事件
element-ui后台管理系统学习(8)-选中与取消选中，删除与批量删除
从零出发
09-14 3032
在进行列表处理的时候，我们往往会使用选中删除等功能，此时变涉及选中与取消选中逻辑，另外对于排序也是复杂的逻辑处理，下面简单介绍其逻辑处理过程，需求如图： 需求说明： （1）删除：点击删除图标后，删除当前图片； （2）选中与取消选中：在选中图片后，右上方会显示当前选中的顺序，如1、2、3...，在取消其中一个或者多个后，便会重新排序。 （3）在选中图片后，会出现批量删除的按钮，功能就是删...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值