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