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