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

相关推荐
M ? A12 分钟前
Vue 的 scoped 样式穿透 React 不支持?用 VuReact 编译就行
前端·javascript·vue.js·react.js·面试·开源·vureact
zs宝来了13 分钟前
Vue 3 Composition API:响应式系统与依赖追踪
前端·javascript·框架
李伟_Li慢慢17 分钟前
wolfram详解山峦算法
前端·算法
村上小树27 分钟前
非常简单地学习一下slate.js的原理
前端·javascript
web打印社区30 分钟前
[特殊字符] 开源好物:web-print-pdf,让 Web 打印像调用接口一样简单!
前端·javascript·vue.js·electron
嗷o嗷o33 分钟前
Android BLE 收到字节流以后,为什么业务状态还是不对
前端
莪_幻尘36 分钟前
Prompt 工程化落地:从"手工咒语"到工业级软件系统
前端
荒天帝37 分钟前
Android App 最强APM来袭
前端
vim怎么退出38 分钟前
我给 Claude Code 写了一个自适应学习 Skill,7 天刷完浏览器原理
前端·人工智能
逍遥归来40 分钟前
UICollectionViewDiffableDataSource 刷新方案总结
前端