Commit ce176e21900ee3fa7da22e75dec49779ea38193c
1 parent
4f2dc7e3
fixed #3081
Showing
2 changed files
with
71 additions
and
28 deletions
Show diff stats
examples/routers/input-number.vue
1 | +<!--<template>--> | ||
2 | + <!--<div>--> | ||
3 | + <!--<!–<Input-number :max="max" name="he" :min="-1" v-model="v1" :autofocus="autofocus"></Input-number>–>--> | ||
4 | + <!--<!–{{ v1 }}–>--> | ||
5 | + <!--<!–<div @click="c">change v1</div>–>--> | ||
6 | + <!--<!–<div @click="changeMax">change max</div>–>--> | ||
7 | + <!--<!–<Input-number disabled :max="10" :min="1" :step="1.2" v-model="v2"></Input-number>–>--> | ||
8 | + <!--<!–<Input-number :max="10" :min="1" v-model="obj.v"></Input-number>–>--> | ||
9 | + <!--<InputNumber :editable="false" :max="10" :min="1" :step="1.2" v-model="value2"></InputNumber>--> | ||
10 | + <!--<InputNumber :precision="1" :max="10" :min="1" :step="0.1" v-model="value1"></InputNumber>--> | ||
11 | + <!--</div>--> | ||
12 | +<!--</template>--> | ||
13 | +<!--<script>--> | ||
14 | + <!--export default {--> | ||
15 | + <!--props: {},--> | ||
16 | + <!--data () {--> | ||
17 | + <!--return {--> | ||
18 | + <!--v1: 1,--> | ||
19 | + <!--v2: 1,--> | ||
20 | + <!--max: 10,--> | ||
21 | + <!--autofocus: true,--> | ||
22 | + <!--obj: {--> | ||
23 | + | ||
24 | + <!--},--> | ||
25 | + <!--value1: 1.0,--> | ||
26 | + <!--value2: 1--> | ||
27 | + <!--};--> | ||
28 | + <!--},--> | ||
29 | + <!--computed: {},--> | ||
30 | + <!--methods: {--> | ||
31 | + <!--c () {--> | ||
32 | + <!--this.v1 = 5;--> | ||
33 | + <!--},--> | ||
34 | + <!--changeMax () {--> | ||
35 | + <!--this.max++;--> | ||
36 | + <!--}--> | ||
37 | + <!--}--> | ||
38 | + <!--};--> | ||
39 | +<!--</script>--> | ||
40 | + | ||
41 | + | ||
1 | <template> | 42 | <template> |
2 | <div> | 43 | <div> |
3 | - <!--<Input-number :max="max" name="he" :min="-1" v-model="v1" :autofocus="autofocus"></Input-number>--> | ||
4 | - <!--{{ v1 }}--> | ||
5 | - <!--<div @click="c">change v1</div>--> | ||
6 | - <!--<div @click="changeMax">change max</div>--> | ||
7 | - <!--<Input-number disabled :max="10" :min="1" :step="1.2" v-model="v2"></Input-number>--> | ||
8 | - <!--<Input-number :max="10" :min="1" v-model="obj.v"></Input-number>--> | ||
9 | - <InputNumber :editable="false" :max="10" :min="1" :step="1.2" v-model="value2"></InputNumber> | ||
10 | - <InputNumber :precision="1" :max="10" :min="1" :step="0.1" v-model="value1"></InputNumber> | 44 | + <InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber> |
45 | + <InputNumber :max="1000000000" :min="1" v-model="value2" :formatter="formatter2" :parser="parser2" @on-change="change" style="width: 200px"></InputNumber> | ||
11 | </div> | 46 | </div> |
12 | </template> | 47 | </template> |
13 | <script> | 48 | <script> |
14 | export default { | 49 | export default { |
15 | - props: {}, | ||
16 | data () { | 50 | data () { |
17 | return { | 51 | return { |
18 | - v1: 1, | ||
19 | - v2: 1, | ||
20 | - max: 10, | ||
21 | - autofocus: true, | ||
22 | - obj: { | ||
23 | - | ||
24 | - }, | ||
25 | - value1: 1.0, | ||
26 | - value2: 1 | ||
27 | - }; | 52 | + value1: 1800000, |
53 | + value2: 55, | ||
54 | + formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','), | ||
55 | + parser: (value) => value.replace(/\$\s?|(,*)/g, ''), | ||
56 | + formatter2: (value) => `${value}%`, | ||
57 | + parser2: (value) => value.replace('%', '') | ||
58 | + } | ||
28 | }, | 59 | }, |
29 | - computed: {}, | ||
30 | methods: { | 60 | methods: { |
31 | - c () { | ||
32 | - this.v1 = 5; | ||
33 | - }, | ||
34 | - changeMax () { | ||
35 | - this.max++; | 61 | + change (v) { |
62 | + console.log(v) | ||
36 | } | 63 | } |
37 | } | 64 | } |
38 | - }; | ||
39 | -</script> | ||
40 | \ No newline at end of file | 65 | \ No newline at end of file |
66 | + } | ||
67 | +</script> |
src/components/input-number/input-number.vue
@@ -29,7 +29,7 @@ | @@ -29,7 +29,7 @@ | ||
29 | @change="change" | 29 | @change="change" |
30 | :readonly="readonly || !editable" | 30 | :readonly="readonly || !editable" |
31 | :name="name" | 31 | :name="name" |
32 | - :value="precisionValue"> | 32 | + :value="formatterValue"> |
33 | </div> | 33 | </div> |
34 | </div> | 34 | </div> |
35 | </template> | 35 | </template> |
@@ -113,6 +113,12 @@ | @@ -113,6 +113,12 @@ | ||
113 | }, | 113 | }, |
114 | elementId: { | 114 | elementId: { |
115 | type: String | 115 | type: String |
116 | + }, | ||
117 | + formatter: { | ||
118 | + type: Function | ||
119 | + }, | ||
120 | + parser: { | ||
121 | + type: Function | ||
116 | } | 122 | } |
117 | }, | 123 | }, |
118 | data () { | 124 | data () { |
@@ -170,6 +176,13 @@ | @@ -170,6 +176,13 @@ | ||
170 | precisionValue () { | 176 | precisionValue () { |
171 | // can not display 1.0 | 177 | // can not display 1.0 |
172 | return this.precision ? this.currentValue.toFixed(this.precision) : this.currentValue; | 178 | return this.precision ? this.currentValue.toFixed(this.precision) : this.currentValue; |
179 | + }, | ||
180 | + formatterValue () { | ||
181 | + if (this.formatter) { | ||
182 | + return this.formatter(this.precisionValue); | ||
183 | + } else { | ||
184 | + return this.precisionValue; | ||
185 | + } | ||
173 | } | 186 | } |
174 | }, | 187 | }, |
175 | methods: { | 188 | methods: { |
@@ -256,6 +269,9 @@ | @@ -256,6 +269,9 @@ | ||
256 | }, | 269 | }, |
257 | change (event) { | 270 | change (event) { |
258 | let val = event.target.value.trim(); | 271 | let val = event.target.value.trim(); |
272 | + if (this.parser) { | ||
273 | + val = this.parser(val); | ||
274 | + } | ||
259 | 275 | ||
260 | if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later | 276 | if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later |
261 | 277 |