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

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

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

我这里有这样一个按钮

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

效果如下

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

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

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

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

相关文章
|
4月前
|
JavaScript
VUE中el-input阻止冒泡防止触发父级事件
VUE中el-input阻止冒泡防止触发父级事件
|
8月前
input type="button"和button的区别
input type="button"和button的区别
|
JavaScript
Element el-check 多选框详解
本文目录 1. 用途 2. 普通多选框 3. 带边框的多选框 4. 多选框组 5. 按钮样式的多选框组 6. 多选框组选中数量限制 7. 选项通过变量自动生成 8. 小结
982 0
Element el-check 多选框详解
不使用el-form仅仅单独给el-input设置表单校验
不使用el-form仅仅单独给el-input设置表单校验
487 0
|
JavaScript 前端开发
Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox(多选)、checked(值的绑定)、select以及修饰符的使用
v-model的使用原理、结合radio、checkbox、checkbox(多选)、checked(值的绑定)、select以及修饰符的使用
200 0
|
JavaScript
jquery attr()方法获取input的checked属性问题
jquery attr()方法获取input的checked属性问题
137 0

热门文章

最新文章