fix Split min and max prop error when resize browser
This commit is contained in:
parent
4aa4aac340
commit
d827b6405c
1 changed files with 24 additions and 13 deletions
|
@ -69,7 +69,10 @@
|
||||||
prefix: 'ivu-split',
|
prefix: 'ivu-split',
|
||||||
offset: 0,
|
offset: 0,
|
||||||
oldOffset: 0,
|
oldOffset: 0,
|
||||||
isMoving: false
|
isMoving: false,
|
||||||
|
computedMin: 0,
|
||||||
|
computedMax: 0,
|
||||||
|
currentValue: 0.5
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -98,12 +101,6 @@
|
||||||
},
|
},
|
||||||
offsetSize () {
|
offsetSize () {
|
||||||
return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
|
return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
|
||||||
},
|
|
||||||
computedMin () {
|
|
||||||
return this.getComputedThresholdValue('min');
|
|
||||||
},
|
|
||||||
computedMax () {
|
|
||||||
return this.getComputedThresholdValue('max');
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -157,22 +154,36 @@
|
||||||
this.$emit('on-move-start');
|
this.$emit('on-move-start');
|
||||||
},
|
},
|
||||||
computeOffset(){
|
computeOffset(){
|
||||||
this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
|
this.$nextTick(() => {
|
||||||
|
this.computedMin = this.getComputedThresholdValue('min');
|
||||||
|
this.computedMax = this.getComputedThresholdValue('max');
|
||||||
|
let value = this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value;
|
||||||
|
let anotherValue = this.getAnotherOffset(value);
|
||||||
|
if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin);
|
||||||
|
if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
|
||||||
|
this.offset = value * 10000 / 100;
|
||||||
|
this.currentValue = value;
|
||||||
|
this.$emit('input', value);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
value () {
|
value (val) {
|
||||||
|
if (val !== this.currentValue) {
|
||||||
|
this.currentValue = val;
|
||||||
this.computeOffset();
|
this.computeOffset();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.computeOffset();
|
this.computeOffset();
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('resize', ()=>{
|
on(window, 'resize', this.computeOffset);
|
||||||
this.computeOffset();
|
},
|
||||||
});
|
beforeDestroy () {
|
||||||
|
off(window, 'resize', this.computeOffset);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Add table
Reference in a new issue