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组件也一样处理

相关推荐
费曼学习法10 小时前
Agent 死循环的根因不在模型:错误分类、退避、熔断、快照四层实现
前端
修炼的dance10 小时前
同一张PNG换五种压法,体积差在颜色数上
前端
Lank_M10 小时前
PNG 有损压缩省下的体积,大头不在 deflate
前端
用户老李10 小时前
相机模型与标定自学教程 02:外参 \[R | t] 与完整投影链路
前端
Dream-Y.ocean10 小时前
鸿蒙PC平台逻控 PLC 编辑器适配实战:基于 Electron 壳方案的纯 JavaScript 梯形图编程与仿真引擎开发
javascript·编辑器·harmonyos
用户老李10 小时前
无线电自学教程 03:电路基础——从欧姆定律到 LC 谐振
前端
申君健248641827720211 小时前
ESM 源码发布 + 显式子路径导出
前端
大龄秃头程序员11 小时前
实践 iOS Touch 响应链:从 sendEvent 到 nextResponder 的完整闭环
前端
用户老李11 小时前
YOLO 目标检测自学教程 05:动手——从零实现 mini-YOLOv1
前端
用户老李11 小时前
视频编码自学教程 02:颜色与色彩空间——从 RGB 到 Y'CbCr 4:2:0
前端