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

相关推荐
我想吃烤肉肉2 分钟前
wait_until=“domcontentloaded“ 解释
开发语言·前端·javascript·爬虫·python
xkxnq2 分钟前
第一阶段:Vue 基础入门(第 12天)
前端·javascript·vue.js
q_19132846956 分钟前
基于Springboo和vue开发的企业批量排班系统人脸识别考勤打卡系统
前端·javascript·vue.js·spring boot·mysql·毕业设计·人脸识别
BianHuanShiZhe10 分钟前
swift计算文本高度
前端·javascript·html
wtsolutions12 分钟前
Sheet-to-Doc模板设计最佳实践:创建专业的Word模板
前端·javascript·数据库
C_心欲无痕12 分钟前
js - AbortController请求中止
开发语言·javascript·ecmascript
小二·21 分钟前
Vue 前端性能优化终极指南:Lighthouse 100 分实战(Vue 3 + Vite)
前端·vue.js·性能优化
LYFlied24 分钟前
深入解析服务端渲染(SSR):从原理到实践
前端·性能优化
用户9047066835724 分钟前
到底是用nuxt的public还是assets?一篇文章开悟
前端
技术人的流水账29 分钟前
我的Vide Coding工具的尝试——版本问题的苦之2
javascript