fixed #3081
This commit is contained in:
parent
4f2dc7e328
commit
ce176e2190
2 changed files with 71 additions and 28 deletions
|
@ -1,39 +1,66 @@
|
||||||
|
<!--<template>-->
|
||||||
|
<!--<div>-->
|
||||||
|
<!--<!–<Input-number :max="max" name="he" :min="-1" v-model="v1" :autofocus="autofocus"></Input-number>–>-->
|
||||||
|
<!--<!–{{ v1 }}–>-->
|
||||||
|
<!--<!–<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>-->
|
||||||
|
<!--</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>
|
|
@ -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
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue