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

相关推荐
良木林几秒前
webpack:基本打包方法
前端·webpack·node.js
青衫码上行1 分钟前
【JavaWeb学习 | 第17篇】JSP内置对象
java·开发语言·前端·学习·jsp
国服第二切图仔6 分钟前
Electron for 鸿蒙PC项目实战之tooltip-component组件
javascript·electron·鸿蒙pc
VX:Fegn08956 分钟前
计算机毕业设计|基于springboot + vue手办商城系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
qq_570398577 分钟前
流式接口数据解析
前端·javascript·vue.js
柒儿吖8 分钟前
Electron for 鸿蒙PC - 番茄工作法计时器应用完整适配实践
javascript·electron·harmonyos
坐吃山猪9 分钟前
Electron入门示例
前端·javascript·electron
那些免费的砖14 分钟前
Isle-Editor (岛屿编辑器) - 免费开源 Web 富文本编辑器,也支持 Notion 块编辑、MarkDown 语法,官方支持 Vue3 开箱即用
前端·编辑器·notion
꒰ঌ小武໒꒱15 分钟前
Trae CN IDE 使用教程
前端·python·编辑器
灵魂学者15 分钟前
Vue3.x —— router 路由配置
服务器·前端·vue.js·路由