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

相关推荐
凌涘16 小时前
前端路由(一):二十行代码实现 Hash 路由
前端
勾勾圈圈蛋蛋16 小时前
黑马Vue_day11:Vue3的watch,ref和reactive,vue2->vue3,defineOptions、Model
前端
AlloyTeamZy17 小时前
我发现,一个人做小游戏最难的,根本不是写代码
前端·人工智能·程序员
亲亲小宝宝鸭17 小时前
离谱架构系列——我在祖传代码里发现了【智子】
javascript
触底反弹17 小时前
🚀 20 行代码手写前端路由 + React Router 核心 API 一篇搞定!
前端·javascript·react.js
灏仟亿前端技术团队17 小时前
企业级 Agent 中台建设方案
前端
程序员黑豆17 小时前
鸿蒙应用开发:一次开发多端适配与自适应布局实战
前端·harmonyos
布兰妮甜17 小时前
Vue 状态管理选型:Pinia 完整实战,对比 Vuex,模块化持久化
前端·javascript·vue.js·pinia·vuex
神王宝宝 王者小学17 小时前
面向领域驱动架构的查询实现方式
前端·python·架构
小林ixn18 小时前
React Router 从入门到实战:一篇搞定路由配置、懒加载与嵌套路由
前端·react.js·前端框架