el-input-number阻止外层button的冒泡

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

我这里有这样一个按钮

代码语言：javascript复制

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

效果如下

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

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

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

代码语言：javascript复制

<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应该执行的函数啦！

button el random

0 人点赞