Vue.js数字输入框组件使用方法详解

本文实例为大家分享了Vue.js数字输入框组件的具体实现代码，供大家参考，具体内容如下

创新互联公司专业为企业提供南谯网站建设、南谯做网站、南谯网站设计、南谯网站制作等企业网站建设、网页设计与制作、南谯企业网站模板建站服务，10多年南谯做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

效果

Vue.js数字输入框组件使用方法详解

入口页 index.html




 
 
 
 数字输入框组件

数字输入框组件 input-number.js

function isValueNumber(value) {
 return (/(^-?[0-9]+\.{1}\d+$) | (^-?[1-9][0-9]*$) | (^-?0{1}$)/).test(value + '');
}


Vue.component('input-number',{
 template: '\
  \
   \
   \
   \
  ',
 props: {
  max: {
   type: Number,
   default: Infinity
  },
  min: {
   type: Number,
   default: -Infinity
  },
  value: {
   type: Number,
   default: 0
  }
 },
 data: function () {
  return {
   currentValue: this.value
  }
 },
 watch: {
  currentValue: function (val) {
   this.$emit('input', val);
   this.$emit('on-change',val);
  },
  value: function (val) {
   this.updateValue(val);
  }
 },
 methods: {
  updateValue: function (val) {
   if(val > this.max)
    val = this.max;
   if(val < this.min)
    val = this.min;
   this.currentValue = val;
  },
  handleDown: function () {
   if(this.currentVaule <= this.min)
    return;
   this.currentValue -= 1;
  },
  handleUp: function () {
   if(this.currentVaule >= this.max)
    return;
   this.currentValue += 1;
  },
  handleChange: function (event) {
   var val = event.target.value.trim();

   var max = this.max;
   var min = this.min;

   if(isValueNumber(val)){
    val = Number(val);
    this.currentValue = val;

    if(val > max){
     this.currentValue = max;
    }else if(val < min){
     this.currentValue = min;
    }
   }else{
    event.target.value = this.currentValue;
   }
  }
 },
 mounted: function () {
  this.updateValue(this.value);
 }
});

根实例

var app = new Vue({
 el: '#app',
 data: {
  value: 5
 }
});

更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

网页标题：Vue.js数字输入框组件使用方法详解
本文来源：http://wjwzjz.com/article/gjdieo.html

新网创想网站建设，新征程启航

Vue.js数字输入框组件使用方法详解

其他资讯