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

相关推荐
2301_7665360518 分钟前
调试无痛入手
开发语言·前端
@大迁世界1 小时前
构建 Next.js 应用时的安全保障与风险防范措施
开发语言·前端·javascript·安全·ecmascript
IT、木易2 小时前
ES6 新特性,优势和用法?
前端·ecmascript·es6
is今夕3 小时前
postcss.config.js 动态配置基准值
javascript·vue.js·postcss
青茶绿梅*23 小时前
500字理透react的hook闭包问题
javascript·react.js·ecmascript
计算机软件程序设计3 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序
指尖时光.3 小时前
【前端进阶】01 重识HTML,掌握页面基本结构和加载过程
前端·html
前端御书房3 小时前
Pinia 3.0 正式发布:全面拥抱 Vue 3 生态,升级指南与实战教程
前端·javascript·vue.js
NoneCoder3 小时前
JavaScript系列(84)--前端工程化概述
前端·javascript·状态模式