Element Plus阻止 el-dropdown、el-switch等冒泡事件

最近做vue3项目,使用Element Plus,又遇到坑了!

问题点:组件中遇到事件冒泡问题了,el-checkbox 中 @change事件要求阻止冒泡,如下代码中要求点击checkbox时不调用li标签的show方法

javascript 复制代码
<li @click="show()">
    <div>li内容</div>
    <div>
       <el-checkbox
        @change="(val)=>handleCheckTower(val,item)"
        v-model="item.showCft"
        >测风塔</el-checkbox>
    </div>
</li>

使用vue3的事件修饰符报错

在el-checkbox 中用 @change.stop 发现不起作用,报错,没有相关方法,坑死

最后取巧方法:

给元素包一层父元素,父元素上使用@click.stop,阻止事件冒泡

javascript 复制代码
<li @click="show()">
    <div>li内容</div>
    <div @click.stop>
       <el-checkbox
        @change="(val)=>handleCheckTower(val,item)"
        v-model="item.showCft"
        >测风塔</el-checkbox>
    </div>
</li>

其他el组件也一样处理

相关推荐
weixin199701080161 小时前
《得物商品详情页前端性能优化实战》
前端·性能优化
帮我吧智能服务平台1 小时前
装备制造企业售后服务数字化:从成本中心到利润中心背景
java·前端·制造
qq_368019661 小时前
用 react 的react-syntax-highlighter 实现语法高亮、行号与多行错误行高亮
前端·react.js·前端框架
lbh1 小时前
从LLM到Agent的核心概念
前端·openai·ai编程
-Da-2 小时前
【操作系统学习日记】并发编程中的竞态条件与同步机制:互斥锁与信号量
java·服务器·javascript·数据库·系统架构
Irene19912 小时前
JavaScript脚本加载的两种方式:defer/async 的区别
前端·javascript·php
天若有情6732 小时前
开篇必看:零基础吃透前端,别再盲目死记硬背了
前端
RulerMike2 小时前
three 实现简单机械臂逆运动
前端·ai编程·three.js
darkb1rd2 小时前
从“会聊天”到“会搭页面”:一次 TinyEngine + MCP 的前端智能化实战思路
前端
社恐的下水道蟑螂2 小时前
从奶茶店彻底搞懂 SSR!从零到拿捏服务端渲染,看完面试吹牛逼不卡壳
前端·react.js·性能优化