本文共 2190 字，大约阅读时间需要 7 分钟。

效果

入口页 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    }});

转载地址：http://qxsqb.baihongyu.com/