当前位置: 首页 > news >正文

Element Plus阻止 el-dropdown、el-switch等冒泡事件

 最近做vue3项目,使用Element Plus,又遇到坑了!

问题点:组件中遇到事件冒泡问题了,el-checkbox 中 @change事件要求阻止冒泡,如下代码中要求点击checkbox时不调用li标签的show方法

<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,阻止事件冒泡
 

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

http://www.lryc.cn/news/190829.html

相关文章:

  • Spring framework Day13:注解结合Java配置类
  • 彻底卸载自己安装的python
  • ES相关面试问题整理
  • MytatisP详解
  • 设计符合REST原则的API可以遵循以下步骤
  • 编程助手成为编程高手,帮您正则调试
  • opencv 双目立体视觉
  • 如何将jpg转化为png?
  • 查看 SSH 登录失败日志
  • 竞赛选题 深度学习+opencv+python实现车道线检测 - 自动驾驶
  • MR混合现实模拟消防安全演练场景实训
  • geecg-uniapp 同源策略 数据请求 获取后台数据 进行页面渲染 ui库安装 冲突解决(3)
  • Krypton控件组使用之KryptonRibbon
  • 低压配电系统中浪涌保护器的作用,安装位置和接线方法
  • OpenCV实现答题卡自动打分!
  • Python编程必备:掌握列表遍历的6种神级技巧!
  • nodejs+vue校园失物招领平台
  • leetcode做题笔记171. Excel 表列序号
  • SW曲面实体导出工程图
  • Docker的私有仓库部署——Harbor
  • JavaScript反爬虫技巧详细攻略
  • C++基础入门学习笔记
  • 手机cpu架构查看及armeabi、armeabi-v7a、arm64-v8a及x86等说明
  • node-sass报错,node16运行node14的项目
  • 在Linux中掌握不同的命令,让创建文件变得易如反掌
  • iOS 14 YYAnimatedImageView加载图片失败处理
  • 兴趣社如何搭建一个兴趣社区?
  • 腾讯wifi码推广如何代理?方法详解!
  • linux下读取socket相关的系统调用总结
  • kafka生产者发送消息报错 Bootstrap broker localhost:9092 (id: -1 rack: null) disconnected