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

相关推荐
颜酱17 小时前
从经典问题入手,吃透动态规划核心(DP五部曲实战)
前端·javascript·算法
深盾科技17 小时前
C++ 中 std::error_code 的应用与实践
java·前端·c++
Jagger_17 小时前
我的AI驯服记:从7640px大屏的惨败,到总结出一套高效协作SOP
前端
hy352817 小时前
VUE 踩坑合集
前端·javascript·vue.js
Franciz小测测18 小时前
Gemini 网页端自定义教程:利用 Stylus 强制开启宽屏显示
前端·css·stylus
彭不懂赶紧问18 小时前
鸿蒙NEXT开发浅进阶到精通15:从零搭建Navigation路由框架
前端·笔记·harmonyos·鸿蒙
菩提祖师_18 小时前
基于Flutter的天气查询APP开发
开发语言·javascript·flutter
xkxnq18 小时前
第一阶段:Vue 基础入门(第 2 天)
前端·javascript·vue.js
程序员刘禹锡18 小时前
定位与图标字体知识点全解析!!!(12.31)
前端·css·html·css3
wordbaby18 小时前
公私分明:为什么你不应该共用 SSH Key(附多账号最佳实践指南)
前端·git·ssh