参考《Vue,js》实战（梁灏编著）
input-number:实战：开发一个数字输入框组件
git代码
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 基本需求数字输入框只能输入数字，而且有两个快捷按钮，可以直接减1和加1,。除此之外，设置初始值、最大值、最小值，在数值改变时，触发一个自定义事件来通知父组件。 --><div id="app"><input-number v-model="value" :max="10" :min="0"></input-number></div><script src="/vue/dist/vue.min.js"></script><script src="input-number.js"></script><script src="index.js"></script></body></html>
index.js
var app = new Vue({el: '#app',data :{value: 5}});
input-number.js
function isValueNumber(value) {return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1})$/).test(value+'');}ponent('input-number',{template: '\<div class="input-number">\<input \type="text"\:value="currentValue"\@change="handleChange">\<button \@click="handleDown"\:disabled="currentValue<=min">-</button>\<button \@click="handleUp"\:disabled="currentValue>=max">+</button>\</div>',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:{handleDown:function(){if (this.currentValue<=this.min) return;this.currentValue--;},handleUp:function(){if(this.currentValue>=this.max) return;this.currentValue++;},handleChange:function(){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;}},updateValue:function(val){if(val>this.max) val=this.max;if(val<this.min) val=this.min;this.currentValue=val;}},mounted:function () {this.updateValue(this.value);}});
