uni-app numberBox使用小技巧，输入负数，视图渲染

1、没办法输入负号：

解决方式：将插件当中的input 的type设置成text，这样可输入负号

<input :disabled="disabled" @blur="_onBlur" class="uni-numbox__value" type="text" v-model="inputValue" />

2、输入负号输入框是NAN

将上面的type修改为text后，在输入负号时小伙伴们会发现这时输入框会出现NAN的问题，这毫无疑问是负号的类型导致计算出现错误导致的。

解决方式：我们需要侦听输入内容的类型，来做个判断即可

watch: {
			value(val) {
				if(typeof(this.inputValue) == 'number' ){
					this.inputValue = +val;
				}
			},
			inputValue(newVal, oldVal) {
					if( newVal.toString() == 'NaN'){
						this.inputValue = 0
						this.$emit("change", 0); //当输入字母或其他非正常符号时，设置默认值为0
					} 
					if (+newVal !== +oldVal && newVal.toString() !== 'NaN') {
						this.$emit("change", newVal);
					}
			}
		},

3、在使用多个numberBox后需要渲染数据时发现每个numberBox都要写一个change方法

解决方式，在每个numberBox上增加一个ref属性，通过ref来判断执行的哪一个插件，例如下面就需要三个change方法，是不是很烦，现在通用一个chang方法就可解决

解决方式：

html：

//第一个numberBox
<uni-section :title="'获取输入的值 : '+numberValue" type="line"></uni-section>
<view class="example-body">
	<uni-number-box :value="numberValue"  ref="numberValue"  @change="change" />
</view>

//第二个numberBox
<uni-section :title="'获取输入的值 : '+numberValue2" type="line"></uni-section>
<view class="example-body">
	<uni-number-box :value="numberValue2"  ref="numberValue2"  @change="change" />
</view>

methods：

change(value) {
				this.numberValue = this.$refs['numberValue']._calcValue();
				this.numberValue2 = this.$refs['numberValue2']._calcValue();
			},

新手小白，技术不够成熟，请大家多多评论指教