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

实现效果

UI组件依然是使用 Quasar Framework。

先来看一下效果：

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 of number type
- HTML（超文本标记语言） | MDN