取法于上,仅得为中;取法于中,故为其下。一一李世民《帝范》

我这里有这样一个按钮

1
2
3
<el-button @click="randomChoose" type="success" size="small">
选择<el-input-number controls-position="right"></el-input-number>个
</el-button>

效果如下

image-20210402224858066

我们发现点击右边上下去增加减少中间个数的时候,也执行了我们上边按钮绑定的randomChoose 函数

但我们想要加上阻止冒泡却加不上

这里其实。。需要在外层再加上一个span或者div标签,再到这个span标签上加上阻止冒泡才可以生效

1
2
3
4
5
6
7
<el-button @click="randomChoose" type="success" size="small">
选择
<span @click.stop>
<el-input-number controls-position="right"></el-input-number>
</span>

</el-button>

这样我们点击上下小箭头的时候就不会触发上面el-button应该执行的函数啦!