InputNumber support null values

This commit is contained in:
huanghong 2018-03-16 13:59:59 +08:00
parent 14b7409b78
commit 10d29acb97
2 changed files with 11 additions and 1 deletions

View file

@ -43,6 +43,11 @@
<div> <div>
<InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber> <InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber>
<InputNumber :max="1000000000" :min="1" v-model="value2" :formatter="formatter2" :parser="parser2" @on-change="change" style="width: 200px"></InputNumber> <InputNumber :max="1000000000" :min="1" v-model="value2" :formatter="formatter2" :parser="parser2" @on-change="change" style="width: 200px"></InputNumber>
<InputNumber @on-change="change" style="width: 200px"></InputNumber>
<InputNumber v-model="valueNull" @on-change="change" style="width: 200px"></InputNumber>
<InputNumber v-model="valueNull" @on-change="change" :formatter="formatter" :parser="parser" style="width: 200px"></InputNumber>
</div> </div>
</template> </template>
<script> <script>
@ -51,6 +56,7 @@
return { return {
value1: 1800000, value1: 1800000,
value2: 55, value2: 55,
valueNull:null,
formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','), formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
parser: (value) => value.replace(/\$\s?|(,*)/g, ''), parser: (value) => value.replace(/\$\s?|(,*)/g, ''),
formatter2: (value) => `${value}%`, formatter2: (value) => `${value}%`,

View file

@ -178,7 +178,7 @@
return this.precision ? this.currentValue.toFixed(this.precision) : this.currentValue; return this.precision ? this.currentValue.toFixed(this.precision) : this.currentValue;
}, },
formatterValue () { formatterValue () {
if (this.formatter) { if (this.formatter && this.precisionValue !== null) {
return this.formatter(this.precisionValue); return this.formatter(this.precisionValue);
} else { } else {
return this.precisionValue; return this.precisionValue;
@ -279,6 +279,10 @@
const isEmptyString = val.length === 0; const isEmptyString = val.length === 0;
val = Number(val); val = Number(val);
if(isEmptyString){
this.setValue(null);
return;
}
if (event.type == 'change'){ if (event.type == 'change'){
if (val === this.currentValue && val > min && val < max) return; // already fired change for input event if (val === this.currentValue && val > min && val < max) return; // already fired change for input event
} }