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

yusirxiaer2023-10-13 20:17

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