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 分钟前
组件通信的艺术:从 props 钻井到 context 共享的进化之路
前端·javascript·设计模式
Mintopia3 分钟前
Three.js 中正切函数在相机视野里的那些事儿
前端·javascript·three.js
Dream耀5 分钟前
掌握React useContext:轻量级状态共享与性能优化指南
前端·javascript·react.js
十盒半价6 分钟前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
红衣信6 分钟前
React 中 useContext 的使用与状态共享详解
前端·react.js·面试
断竿散人7 分钟前
JavaScript 事件系统完全指南:从事件流原理到现代化事件处理实战
前端·javascript
梨子同志7 分钟前
Vue 生命周期
前端·vue.js
Point7 分钟前
[ahooks] useEventEmitter源码阅读
前端·javascript·设计模式
梨子同志8 分钟前
Vue 组件通信详解
前端·vue.js
carrieXin8 分钟前
Angular 可复用动态表单组件封装
前端