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

相关推荐
打工人小夏13 小时前
使用finalshell在新服务器上部署前端页面
linux·服务器·前端·vue.js
恋猫de小郭13 小时前
2026 Android I/O ,全新 AI 手机、 Android PC 和车载驾驶
android·前端·flutter
yqcoder13 小时前
突破性能瓶颈:深入理解 JavaScript TypedArray
java·开发语言·javascript
yqcoder13 小时前
JS 中的“空”之双雄:null vs undefined
开发语言·前端·javascript
计算机安禾13 小时前
【c++面向对象编程】第8篇:const成员与mutable:常对象与常函数
开发语言·javascript·c++
浩~~13 小时前
AI-Web 靶场
java·前端·网络
MandalaO_O13 小时前
Java Web :JDBC CRUD 与前后端交互
java·前端·交互
RPGMZ15 小时前
RPGMZ游戏引擎 一个窗口 文本居中显示
开发语言·javascript·游戏引擎·rpgmz
海石19 小时前
📱随时随地大小编:TraeSolo 移动端初体验
前端·ai编程·trae
爱滑雪的码农21 小时前
详细说说React大型项目结构以及日常开发核心语法
前端·javascript·react.js