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

Merge pull request #4315 from huanghong1125/input-number

Browse source 
update input-number
This commit is contained in:
Aresn 2018-08-28 18:04:44 +08:00 • committed by GitHub
commit cec470ebd5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -54,7 +54,24 @@
<InputNumber v-model="value3" style="width: 200px" placeholder="Enter something..."></InputNumber> -->
<InputNumber v-model="valueNull" style="width: 200px" :min='0' :max='10000' :precision='2' ></InputNumber>
<InputNumber v-model="valueNull" style="width: 200px" :min='1' :max='10000' :precision='2' ></InputNumber>
<InputNumber v-model="valueNull" style="width: 200px" ></InputNumber>
<div style="margin:10px 0px">
<InputNumber :activeChange="false" v-model="valueNull" style="width: 200px" :min='1' :max='10000' :precision='2' ></InputNumber>
<InputNumber :activeChange="false" v-model="valueNull" style="width: 200px" ></InputNumber>
</div>
<div style="margin:10px 0px">
<InputNumber
:max="10000"
v-model="value9"
:formatter="value => `$ ${value}`.replace(/B(?=(d{3})+(?!d))/g, ',')"
:parser="value => value.replace(/\$s?|(,*)/g, '')"></InputNumber>
<InputNumber
:max="100"
v-model="value10"
:formatter="value => `${value}%`"
:parser="value => value.replace('%', '')"></InputNumber>
</div>
</div>
</template>
<script>
@ -68,16 +85,18 @@
formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
parser: (value) => value.replace(/\$\s?|(,*)/g, ''),
formatter2: (value) => `${value}%`,
parser2: (value) => value.replace('%', '')
}
parser2: (value) => value.replace('%', ''),
value9: 1000,
value10: 100
};
},
methods: {
focus (e) {
e.target.select()
e.target.select();
},
change (v) {
console.log(v)
console.log(v);
}
}
}
};
</script>

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

@ -3,13 +3,11 @@
<div :class="handlerClasses">
<a
@click="up"
@mousedown="preventDefault"
:class="upClasses">
<span :class="innerUpClasses" @click="preventDefault"></span>
</a>
<a
@click="down"
@mousedown="preventDefault"
:class="downClasses">
<span :class="innerDownClasses" @click="preventDefault"></span>
</a>
@ -82,6 +80,10 @@
type: Number,
default: 1
},
activeChange:{
type:Boolean,
default:true
},
value: {
type: Number,
default: 1
@ -252,7 +254,16 @@
setValue (val) {
// 如果 step 是小数，且没有设置 precision，是有问题的
if (val && !isNaN(this.precision)) val = Number(Number(val).toFixed(this.precision));
const {min, max} = this;
if (val!==null) {
if (val > max) {
val = max;
} else if (val < min) {
val = min;
}
}
this.$nextTick(() => {
this.currentValue = val;
this.$emit('input', val);
@ -278,42 +289,32 @@
}
},
change (event) {
if (event.type == 'input' && !this.activeChange) return;
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
const {min, max} = this;
const isEmptyString = val.length === 0;
val = Number(val);
if(isEmptyString){
this.setValue(null);
return;
}
if (event.type == 'change'){
if (val === this.currentValue && val > min && val < max) return; // already fired change for input event
}
if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later
val = Number(val);
if (!isNaN(val) && !isEmptyString) {
if (!isNaN(val)) {
this.currentValue = val;
if (event.type == 'input' && val < min) return; // prevent fire early in case user is typing a bigger number. Change will handle this otherwise.
if (val > max) {
this.setValue(max);
} else if (val < min) {
this.setValue(min);
} else {
this.setValue(val);
}
this.setValue(val);
} else {
event.target.value = this.currentValue;
}
},
changeVal (val) {
val = Number(val);
//this.setValue(val);
if (!isNaN(val)) {
const step = this.step;