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

相关推荐
十有八七7 小时前
AI Agent的“骨架”之争:四种Harness设计哲学深度解构
前端·人工智能
卡次卡次17 小时前
14.2:详细补充:子进程会复制什么
前端·python·php
泽_浪里白条8 小时前
superset 踩过的坑之嵌入式 Dashboard 数据筛选
前端·后端
IOT.FIVE.NO.18 小时前
Codex Skill 内部结构解析:从 SKILL.md 到 scripts、references、assets
前端·javascript·人工智能·笔记·html
PILIPALAPENG8 小时前
第4周 Day 2:多步推理 Agent——让 Agent 学会"先想再干"
前端·人工智能·python
LPieces9 小时前
从零实现 AI 流式对话:SSE + Node.js 完整指南
前端
Crystal3289 小时前
【终极指南】前端方面解决 uni-app APP 端 SSE 流式请求被缓冲拦截、无法实时渲染的问题
android·前端·ai编程
BG9 小时前
利用Codex GPT-5.5 基于extended_image新增图片透视变换功能
前端·flutter
daols889 小时前
vue甘特图vxe-gantt如何实现拖拽任务条时如有已关联依赖线,同时更新依赖任务的日期的方式
javascript·vue.js·甘特图