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

normalise public (export) value to number of step decimal cases

Browse source
This commit is contained in:
Sergio Crisostomo 2018-02-07 11:07:32 +01:00
parent c15ea08c8c
commit e3549149db
1 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/slider/slider.vue
View file

@ -5,11 +5,11 @@
:min="min" :min="min"
:max="max" :max="max"
:step="step" :step="step"
:value="currentValue[0]" :value="exportValue[0]"
:disabled="disabled" :disabled="disabled"
@on-change="handleInputChange"></Input-number> @on-change="handleInputChange"></Input-number>
<div :class="[prefixCls + '-wrap']" ref="slider" @click.self="sliderClick"> <div :class="[prefixCls + '-wrap']" ref="slider" @click.self="sliderClick">
<input type="hidden" :name="name" :value="currentValue"> <input type="hidden" :name="name" :value="exportValue">
<template v-if="showStops"> <template v-if="showStops">
<div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div> <div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div>
</template> </template>
@ -19,7 +19,7 @@
:style="{left: minPosition + '%'}" :style="{left: minPosition + '%'}"
@touchstart="onPointerDown($event, 'min')" @touchstart="onPointerDown($event, 'min')"
@mousedown="onPointerDown($event, 'min')"> @mousedown="onPointerDown($event, 'min')">
<Tooltip :controlled="pointerDown === 'min'" placement="top" :content="tipFormat(currentValue[0])" <Tooltip :controlled="pointerDown === 'min'" placement="top" :content="tipFormat(exportValue[0])"
:disabled="tipDisabled" :always="showTip === 'always'" ref="minTooltip"> :disabled="tipDisabled" :always="showTip === 'always'" ref="minTooltip">
<div :class="minButtonClasses"></div> <div :class="minButtonClasses"></div>
</Tooltip> </Tooltip>
@ -29,7 +29,7 @@
:style="{left: maxPosition + '%'}" :style="{left: maxPosition + '%'}"
@touchstart="onPointerDown($event, 'max')" @touchstart="onPointerDown($event, 'max')"
@mousedown="onPointerDown($event, 'max')"> @mousedown="onPointerDown($event, 'max')">
<Tooltip :controlled="pointerDown === 'max'" placement="top" :content="tipFormat(currentValue[1])" <Tooltip :controlled="pointerDown === 'max'" placement="top" :content="tipFormat(exportValue[1])"
:disabled="tipDisabled" :always="showTip === 'always'" ref="maxTooltip"> :disabled="tipDisabled" :always="showTip === 'always'" ref="maxTooltip">
<div :class="maxButtonClasses"></div> <div :class="maxButtonClasses"></div>
</Tooltip> </Tooltip>
@ -120,16 +120,16 @@
this.currentValue = val; this.currentValue = val;
} }
}, },
currentValue (val) { exportValue (values) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.minTooltip.updatePopper(); this.$refs.minTooltip.updatePopper();
if (this.range) { if (this.range) {
this.$refs.maxTooltip.updatePopper(); this.$refs.maxTooltip.updatePopper();
} }
}); });
const exportValue = this.range ? val : val[0]; const value = this.range ? values : values[0];
this.$emit('input', exportValue); this.$emit('input', value);
this.$emit('on-input', exportValue); this.$emit('on-input', value);
} }
}, },
computed: { computed: {
@ -159,6 +159,10 @@
} }
]; ];
}, },
exportValue(){
const decimalCases = (String(this.step).split('.')[1] || '').length;
return this.currentValue.map(nr => Number(nr.toFixed(decimalCases)));
},
minPosition () { minPosition () {
const val = this.currentValue; const val = this.currentValue;
return (val[0] - this.min) / this.valueRange * 100; return (val[0] - this.min) / this.valueRange * 100;
@ -269,9 +273,9 @@
}, },
emitChange(){ emitChange(){
const exportValue = this.range ? this.currentValue : this.currentValue[0]; const value = this.range ? this.exportValue : this.exportValue[0];
this.$emit('on-change', exportValue); this.$emit('on-change', value);
this.dispatch('FormItem', 'on-form-change', exportValue); this.dispatch('FormItem', 'on-form-change', value);
}, },
sliderClick (event) { sliderClick (event) {
@ -287,9 +291,7 @@
handleInputChange (val) { handleInputChange (val) {
this.currentValue = [val, this.currentValue[1]]; this.currentValue = [val, this.currentValue[1]];
const exportValue = this.range ? this.currentValue : this.currentValue[0]; this.emitChange();
this.$emit('on-change', exportValue);
this.dispatch('FormItem', 'on-form-change', exportValue);
}, },
}, },
mounted () { mounted () {