drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed #3081

Browse source
This commit is contained in:
梁灏 2018-03-13 15:17:19 +08:00
parent 4f2dc7e328
commit ce176e2190
2 changed files with 71 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
examples/routers/input-number.vue
View file

@ -1,39 +1,66 @@
<!--<template>-->
<!--<div>-->
<!--&lt;!&ndash;<Input-number :max="max" name="he" :min="-1" v-model="v1" :autofocus="autofocus"></Input-number>&ndash;&gt;-->
<!--&lt;!&ndash;{{ v1 }}&ndash;&gt;-->
<!--&lt;!&ndash;<div @click="c">change v1</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div @click="changeMax">change max</div>&ndash;&gt;-->
<!--&lt;!&ndash;<Input-number disabled :max="10" :min="1" :step="1.2" v-model="v2"></Input-number>&ndash;&gt;-->
<!--&lt;!&ndash;<Input-number :max="10" :min="1" v-model="obj.v"></Input-number>&ndash;&gt;-->
<!--<InputNumber :editable="false" :max="10" :min="1" :step="1.2" v-model="value2"></InputNumber>-->
<!--<InputNumber :precision="1" :max="10" :min="1" :step="0.1" v-model="value1"></InputNumber>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--props: {},-->
<!--data () {-->
<!--return {-->
<!--v1: 1,-->
<!--v2: 1,-->
<!--max: 10,-->
<!--autofocus: true,-->
<!--obj: {-->
<!--},-->
<!--value1: 1.0,-->
<!--value2: 1-->
<!--};-->
<!--},-->
<!--computed: {},-->
<!--methods: {-->
<!--c () {-->
<!--this.v1 = 5;-->
<!--},-->
<!--changeMax () {-->
<!--this.max++;-->
<!--}-->
<!--}-->
<!--};-->
<!--</script>-->
<template> <template>
<div> <div>
<!--<Input-number :max="max" name="he" :min="-1" v-model="v1" :autofocus="autofocus"></Input-number>--> <InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber>
<!--{{ v1 }}--> <InputNumber :max="1000000000" :min="1" v-model="value2" :formatter="formatter2" :parser="parser2" @on-change="change" style="width: 200px"></InputNumber>
<!--<div @click="c">change v1</div>-->
<!--<div @click="changeMax">change max</div>-->
<!--<Input-number disabled :max="10" :min="1" :step="1.2" v-model="v2"></Input-number>-->
<!--<Input-number :max="10" :min="1" v-model="obj.v"></Input-number>-->
<InputNumber :editable="false" :max="10" :min="1" :step="1.2" v-model="value2"></InputNumber>
<InputNumber :precision="1" :max="10" :min="1" :step="0.1" v-model="value1"></InputNumber>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: {},
data () { data () {
return { return {
v1: 1, value1: 1800000,
v2: 1, value2: 55,
max: 10, formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
autofocus: true, parser: (value) => value.replace(/\$\s?|(,*)/g, ''),
obj: { formatter2: (value) => `${value}%`,
parser2: (value) => value.replace('%', '')
}
}, },
value1: 1.0,
value2: 1
};
},
computed: {},
methods: { methods: {
c () { change (v) {
this.v1 = 5; console.log(v)
}, }
changeMax () {
this.max++;
} }
} }
};
</script> </script>

18
src/components/input-number/input-number.vue
View file

@ -29,7 +29,7 @@
@change="change" @change="change"
:readonly="readonly || !editable" :readonly="readonly || !editable"
:name="name" :name="name"
:value="precisionValue"> :value="formatterValue">
</div> </div>
</div> </div>
</template> </template>
@ -113,6 +113,12 @@
}, },
elementId: { elementId: {
type: String type: String
},
formatter: {
type: Function
},
parser: {
type: Function
} }
}, },
data () { data () {
@ -170,6 +176,13 @@
precisionValue () { precisionValue () {
// can not display 1.0 // can not display 1.0
return this.precision ? this.currentValue.toFixed(this.precision) : this.currentValue; return this.precision ? this.currentValue.toFixed(this.precision) : this.currentValue;
},
formatterValue () {
if (this.formatter) {
return this.formatter(this.precisionValue);
} else {
return this.precisionValue;
}
} }
}, },
methods: { methods: {
@ -256,6 +269,9 @@
}, },
change (event) { change (event) {
let val = event.target.value.trim(); let val = event.target.value.trim();
if (this.parser) {
val = this.parser(val);
}
if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later