github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Slider: reset size on resize

pull/6557/head
Leopoldthecoder 2017-08-03 14:08:08 +08:00 committed by 杨奕
parent 7c546dde21
commit f90bfa1362
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/slider/src/button.vue
View File

@ -141,10 +141,10 @@
let diff = 0; let diff = 0;
if (this.vertical) { if (this.vertical) {
this.currentY = event.clientY; this.currentY = event.clientY;
diff = (this.startY - this.currentY) / this.$parent.$sliderSize * 100; diff = (this.startY - this.currentY) / this.$parent.sliderSize * 100;
} else { } else {
this.currentX = event.clientX; this.currentX = event.clientX;
diff = (this.currentX - this.startX) / this.$parent.$sliderSize * 100; diff = (this.currentX - this.startX) / this.$parent.sliderSize * 100;
} }
this.newPosition = this.startPosition + diff; this.newPosition = this.startPosition + diff;
this.setPosition(this.newPosition); this.setPosition(this.newPosition);

24
packages/slider/src/main.vue
View File

@ -46,7 +46,6 @@
<script type="text/babel"> <script type="text/babel">
import ElInputNumber from 'element-ui/packages/input-number'; import ElInputNumber from 'element-ui/packages/input-number';
import SliderButton from './button.vue'; import SliderButton from './button.vue';
import { getStyle } from 'element-ui/src/utils/dom';
import Emitter from 'element-ui/src/mixins/emitter'; import Emitter from 'element-ui/src/mixins/emitter';
export default { export default {
@ -115,7 +114,8 @@
firstValue: null, firstValue: null,
secondValue: null, secondValue: null,
oldValue: null, oldValue: null,
dragging: false dragging: false,
sliderSize: 1
}; };
}, },
@ -223,19 +223,21 @@
if (this.disabled || this.dragging) return; if (this.disabled || this.dragging) return;
if (this.vertical) { if (this.vertical) {
const sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom; const sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom;
this.setPosition((sliderOffsetBottom - event.clientY) / this.$sliderSize * 100); this.setPosition((sliderOffsetBottom - event.clientY) / this.sliderSize * 100);
} else { } else {
const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left; const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
this.setPosition((event.clientX - sliderOffsetLeft) / this.$sliderSize * 100); this.setPosition((event.clientX - sliderOffsetLeft) / this.sliderSize * 100);
}
},
resetSize() {
if (this.$refs.slider) {
this.sliderSize = this.$refs.slider[`client${ this.vertical ? 'Height' : 'Width' }`];
} }
} }
}, },
computed: { computed: {
$sliderSize() {
return parseInt(getStyle(this.$refs.slider, (this.vertical ? 'height' : 'width')), 10);
},
stops() { stops() {
if (this.step === 0) { if (this.step === 0) {
process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'production' &&
@ -320,6 +322,12 @@
} }
this.oldValue = this.firstValue; this.oldValue = this.firstValue;
} }
this.resetSize();
window.addEventListener('resize', this.resetSize);
},
beforeDestroy() {
window.removeEventListener('resize', this.resetSize);
} }
}; };
</script> </script>