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

相关推荐
流光D几秒前
AI Era: Building Web Sites and Configuring Nginx Reverse Proxy Process
前端·人工智能·nginx
sakidd几秒前
VS Code 的 AI Chat 现在已经这么能干了?
前端
吴长建先生几秒前
Vue.js支付回调页面如何设计才能保障对账准确性?
vue.js
计算机魔术师9 分钟前
英伟达砸130亿美元买下一个平台,黄仁勋到底在怕什么?
前端
全栈项目管理程序猿16 分钟前
ArcGIS JS 基础教程(18):SceneLayer 场景图层
javascript
leoZ23121 分钟前
第 2 篇:搭建地基——Vue3 + Vite + Tailwind v4 + shadcn-vue
前端·javascript·vue.js·人工智能·目标检测·数据挖掘·语音识别
coderCN38 分钟前
Nodejs path OS process child_process FS crypto zlib ffmpeg Markdown 转 html
前端
七牛开发者41 分钟前
拆解 dsh:Session 的事件溯源与状态重建
javascript·github·agent
梨想橙汁1 小时前
JS BOM 浏览器对象:定时器与同步异步底层理解
前端·javascript
吴长建先生1 小时前
支付回调接口设计与代码规范:如何提升团队工程化能力
vue.js