chenhaodong / mew-iview

Commit ce176e21900ee3fa7da22e75dec49779ea38193c

Authored by 梁灏
1 parent 4f2dc7e3

fixed #3081

Showing 2 changed files with 71 additions and 28 deletions   Show diff stats
Inline Side-by-side
examples/routers/input-number.vue
  Show/Hide comments   View file @ce176e2
  1 +<!--<template>-->
  2 + <!--<div>-->
  3 + <!--&lt;!&ndash;<Input-number :max="max" name="he" :min="-1" v-model="v1" :autofocus="autofocus"></Input-number>&ndash;&gt;-->
  4 + <!--&lt;!&ndash;{{ v1 }}&ndash;&gt;-->
  5 + <!--&lt;!&ndash;<div @click="c">change v1</div>&ndash;&gt;-->
  6 + <!--&lt;!&ndash;<div @click="changeMax">change max</div>&ndash;&gt;-->
  7 + <!--&lt;!&ndash;<Input-number disabled :max="10" :min="1" :step="1.2" v-model="v2"></Input-number>&ndash;&gt;-->
  8 + <!--&lt;!&ndash;<Input-number :max="10" :min="1" v-model="obj.v"></Input-number>&ndash;&gt;-->
  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
  Show/Hide comments   View file @ce176e2
@@ -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