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

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

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

    2. "show()">
  • <div>li内容div>
  • <div>
  • <el-checkbox
  • @change="(val)=>handleCheckTower(val,item)"
  • v-model="item.showCft"
  • >测风塔el-checkbox>
  • div>

使用vue3的事件修饰符报错
在el-checkbox 中用 @change.stop 发现不起作用，报错，没有相关方法，坑死

最后取巧方法：

给元素包一层父元素，父元素上使用@click.stop，阻止事件冒泡
 

  2. "show()">
  • <div>li内容div>
  • <div @click.stop>
  • <el-checkbox
  • @change="(val)=>handleCheckTower(val,item)"
  • v-model="item.showCft"
  • >测风塔el-checkbox>
  • div>

    • 其他el组件也一样处理

  • 相关阅读:
    大模型为使用Prompt提供的指导和建议
    Redis Lua脚本实现分布式锁
    Linux /dev目录详解和Linux系统各个目录的作用
    MySQL入门指南4（查询进阶，外连接）
    LeetCode：2. 两数相加
    一些 Conda 的常用命令
    mulesoft Module 12 quiz解析
    IO流（二）
    node+vue前后端分离实现登录时使用图片验证码
    【转载】 Bytedance火山引擎智能拥塞控制算法 VICC
  • 原文地址：https://blog.csdn.net/yusirxiaer/article/details/133804349