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

相关文章
|
5月前
|
前端开发
input去掉输入框type为number时的上下箭头的实现方法
input去掉输入框type为number时的上下箭头的实现方法
41 0
|
6月前
element中el-input组件事件
element中el-input组件事件
|
6月前
el-input点击事件
el-input点击事件
101 1
|
6月前
Element-UI中el-input输入值不显示
Element-UI中el-input输入值不显示
150 0
|
9月前
不使用el-form仅仅单独给el-input设置表单校验
不使用el-form仅仅单独给el-input设置表单校验
219 0
|
JavaScript 前端开发
Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox(多选)、checked(值的绑定)、select以及修饰符的使用
v-model的使用原理、结合radio、checkbox、checkbox(多选)、checked(值的绑定)、select以及修饰符的使用
103 0
el-form中error重复错误只显示一次
el-form中el-form-item的error属性监听的是watch方法,也就是两次重复的错误操作,提示的错误信息一致,就不会触发watch方法。 就会导致第一次获取error信息,信息正常显示在了页面中,第二次获取到了同样的error信息,信息却不显示在页面中了。
428 0
|
JavaScript
Element el-check 多选框详解
本文目录 1. 用途 2. 普通多选框 3. 带边框的多选框 4. 多选框组 5. 按钮样式的多选框组 6. 多选框组选中数量限制 7. 选项通过变量自动生成 8. 小结
854 0
Element el-check 多选框详解