说说如何在Vue.js中实现数字输入组件的方法

  
  



  


2 按键支持
当输入框获得焦点时，按下“向上键”时，增长；按下“向上键”时，减少。


这可以利用按键修饰符来实现，我们修改示例中的组件模板：



...
 
...

Vue.js 定义按键别名有这些：

  
.enter
  
.tab
  
.delete(捕获“删除”和“退格”键)
  
.esc
  
.space
  
.up
  
.down
  
.left
  
.right

效果：

3 控制步伐


新增一个步伐属性，增长或者减少以步伐值为变化量。之前的示例，步伐为 1。


首先在 props 中，定义一个步伐属性：



//步伐
step: {
  type: Number,
  default: 1
}


然后在增长与减少函数中，使用步伐属性做为变化量：



/**
 * 减少
 */
down: function () {
  if (this.currentVal <= this.min) {
    return;
  }
  this.currentVal -= this.step;
},
/**
 * 增长
 */
up: function () {
  if (this.currentVal >= this.max) {
    return;
  }
  this.currentVal += this.step;
},


最后为组件重新配置参数：






效果：

本文示例代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。