Quasar Input:type="number" 去掉上下小箭头实现加减按钮样式功能

这篇文章主要介绍了Quasar Input:type="number" 去掉上下小箭头实现加减按钮样式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

实现效果

UI组件依然是使用 Quasar Framework。

先来看一下效果：

加减.gif

input type="number" 去掉上下小箭头

去掉上下小箭头，主要是css:

 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type='number'] { -moz-appearance: textfield; }

实现加减按钮样式及功能

template：

   数字(必填)

css:

  data () { return { model: 10 } }

methods:

 numberAdd (val) { // console.log(val) val++ this.model = Number.parseFloat(val) }, numberSub (val) { // console.log(val) val-- this.model = Number.parseFloat(val) }

完整代码

请查看：Quasar Input:type="number" 去掉上下小箭头实现加减按钮样式点击预览

总结

以上就是Quasar Input:type="number" 去掉上下小箭头实现加减按钮样式功能的详细内容，更多请关注0133技术站其它相关文章！