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

相关推荐
我没想到原来他们都是一堆坏人几秒前
常用npm源与nrm
前端·npm·node.js
编代码的小王4 分钟前
【无标题】
前端·css
仰望.11 分钟前
vxe-table 按多个列进行分组和按多个字段进行分组的使用方式
vue.js·vxe-table
im_AMBER12 分钟前
React 20 useState管理组件状态 | 解构 | 将事件处理函数作为 props 传递 | 状态提升
前端·javascript·笔记·学习·react.js·前端框架
小oo呆13 分钟前
【自然语言处理与大模型】LangChainV1.0入门指南:核心组件Tools
前端·javascript·easyui
亿元程序员18 分钟前
你知道三国志战略版是怎么实现横竖屏动态切换的吗?
前端
BD_Marathon20 分钟前
Vue3_双向绑定
前端·javascript·vue.js
小白学大数据27 分钟前
Temu 商品历史价格趋势爬虫与分析
开发语言·javascript·爬虫·python
仰望.29 分钟前
vue 甘特图 vxe-gantt 手动增加一条依赖线,删除连接线的用法
vue.js·甘特图·vxe-ui·vxe-gantt
霍理迪29 分钟前
CSS复合、关系、属性、伪类选择器
前端·javascript·css