other / 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 42 <template>
2 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 46 </div>
12 47 </template>
13 48 <script>
14 49 export default {
15   - props: {},
16 50 data () {
17 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 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 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 29 @change="change"
30 30 :readonly="readonly || !editable"
31 31 :name="name"
32   - :value="precisionValue">
  32 + :value="formatterValue">
33 33 </div>
34 34 </div>
35 35 </template>
... ... @@ -113,6 +113,12 @@
113 113 },
114 114 elementId: {
115 115 type: String
  116 + },
  117 + formatter: {
  118 + type: Function
  119 + },
  120 + parser: {
  121 + type: Function
116 122 }
117 123 },
118 124 data () {
... ... @@ -170,6 +176,13 @@
170 176 precisionValue () {
171 177 // can not display 1.0
172 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 188 methods: {
... ... @@ -256,6 +269,9 @@
256 269 },
257 270 change (event) {
258 271 let val = event.target.value.trim();
  272 + if (this.parser) {
  273 + val = this.parser(val);
  274 + }
259 275  
260 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  
... ...