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

  • 相关阅读:
    30：第三章：开发通行证服务：13：开发【更改/完善用户信息，接口】；（使用***BO类承接参数，并使用了参数校验）
    Leetcode（665）——非递减数列
    Vue组件间的通信方式浅析
    嵌入式分享合集101-PLC
    Android网络基础面试题之HTTPS的工作流程和原理
    velocity.properties配置说明
    【Oracle】调用HTTP接口
    Spring容器获取Bean的9种方式
    Kafka (六) --------- Kafka 消费者及其生产经验
    宜搭，怎么在公式编辑中计算百分比的和？
  • 原文地址：https://blog.csdn.net/yusirxiaer/article/details/133804349