add Slider component
add Slider component
This commit is contained in:
梁灏
parent
3a2c6fc75a
commit
69576f47f4
15 changed files with 473 additions and 27 deletions
|
|
@ -1,23 +1,53 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<Input-number v-if="!range && showInput" :min="min" :max="max" :step="step" :value.sync="value" :disabled="disabled"></Input-number>
|
||||
<div :class="[prefixCls + '-wrap']" @click="sliderClick">
|
||||
<Input-number
|
||||
v-if="!range && showInput"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
:value="value"
|
||||
:disabled="disabled"
|
||||
@on-change="handleInputChange"></Input-number>
|
||||
<div :class="[prefixCls + '-wrap']" v-el:slider @click="sliderClick">
|
||||
<template v-if="showStops">
|
||||
<div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }"></div>
|
||||
</template>
|
||||
<div :class="[prefixCls + '-bar']" :style="barStyle"></div>
|
||||
<div :class="[prefixCls + '-button-wrap']" v-if="!range">
|
||||
<Tooltip placement="top" :content="tipFormat(value)">
|
||||
<div :class="[prefixCls + '-button']"></div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<template v-if="range">
|
||||
<div
|
||||
:class="[prefixCls + '-button-wrap']"
|
||||
:style="{left: firstPosition + '%'}"
|
||||
@mousedown="onFirstButtonDown">
|
||||
<Tooltip placement="top" :content="tipFormat(value[0])" v-ref:tooltip>
|
||||
<div :class="button1Classes"></div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
:class="[prefixCls + '-button-wrap']"
|
||||
:style="{left: secondPosition + '%'}"
|
||||
@mousedown="onSecondButtonDown">
|
||||
<Tooltip placement="top" :content="tipFormat(value[1])" v-ref:tooltip2>
|
||||
<div :class="button2Classes"></div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
:class="[prefixCls + '-button-wrap']"
|
||||
:style="{left: singlePosition + '%'}"
|
||||
@mousedown="onSingleButtonDown">
|
||||
<Tooltip placement="top" :content="tipFormat(value)" v-ref:tooltip>
|
||||
<div :class="buttonClasses"></div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import InputNumber from '../../components/input-number/input-number.vue';
|
||||
import Tooltip from '../../components/tooltip/tooltip.vue';
|
||||
import { getStyle } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-slider';
|
||||
|
||||
|
|
@ -65,7 +95,20 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
prefixCls: prefixCls,
|
||||
dragging: false,
|
||||
firstDragging: false,
|
||||
secondDragging: false,
|
||||
startX: 0,
|
||||
currentX: 0,
|
||||
startPos: 0,
|
||||
newPos: null,
|
||||
oldSingleValue: this.value,
|
||||
oldFirstValue: this.value[0],
|
||||
oldSecondValue: this.value[1],
|
||||
singlePosition: (this.value - this.min) / (this.max - this.min) * 100,
|
||||
firstPosition: (this.value[0] - this.min) / (this.max - this.min) * 100,
|
||||
secondPosition: (this.value[1] - this.min) / (this.max - this.min) * 100
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -73,12 +116,36 @@
|
|||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-input`]: this.showInput,
|
||||
[`${prefixCls}-input`]: this.showInput && !this.range,
|
||||
[`${prefixCls}-range`]: this.range,
|
||||
[`${prefixCls}-disabled`]: this.disabled
|
||||
}
|
||||
]
|
||||
},
|
||||
buttonClasses () {
|
||||
return [
|
||||
`${prefixCls}-button`,
|
||||
{
|
||||
[`${prefixCls}-button-dragging`]: this.dragging
|
||||
}
|
||||
];
|
||||
},
|
||||
button1Classes () {
|
||||
return [
|
||||
`${prefixCls}-button`,
|
||||
{
|
||||
[`${prefixCls}-button-dragging`]: this.firstDragging
|
||||
}
|
||||
];
|
||||
},
|
||||
button2Classes () {
|
||||
return [
|
||||
`${prefixCls}-button`,
|
||||
{
|
||||
[`${prefixCls}-button-dragging`]: this.secondDragging
|
||||
}
|
||||
];
|
||||
},
|
||||
barStyle () {
|
||||
let style;
|
||||
|
||||
|
|
@ -97,19 +164,249 @@
|
|||
},
|
||||
stops() {
|
||||
return this.max / this.step;
|
||||
},
|
||||
sliderWidth () {
|
||||
return parseInt(getStyle(this.$els.slider, 'width'), 10);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tooltip.updatePopper();
|
||||
if (this.range) {
|
||||
this.$refs.tooltip2.updatePopper();
|
||||
}
|
||||
});
|
||||
this.updateValue(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sliderClick () {
|
||||
updateValue (val, init = false) {
|
||||
if (this.range) {
|
||||
let value = [...val];
|
||||
if (init) {
|
||||
if (value[0] > value[1]) {
|
||||
value = [this.min, this.max];
|
||||
}
|
||||
} else {
|
||||
if (value[0] > value[1]) {
|
||||
value[0] = value[1];
|
||||
}
|
||||
}
|
||||
if (value[0] < this.min) {
|
||||
value[0] = this.min;
|
||||
}
|
||||
if (value[0] > this.max) {
|
||||
value[0] = this.max;
|
||||
}
|
||||
if (value[1] < this.min) {
|
||||
value[1] = this.min;
|
||||
}
|
||||
if (value[1] > this.max) {
|
||||
value[1] = this.max;
|
||||
}
|
||||
if (this.value[0] === value[0] && this.value[1] === value[1]) return;
|
||||
|
||||
this.value = value;
|
||||
this.setFirstPosition(this.value[0]);
|
||||
this.setSecondPosition(this.value[1]);
|
||||
} else {
|
||||
if (val < this.min) {
|
||||
this.value = this.min;
|
||||
}
|
||||
if (val > this.max) {
|
||||
this.value = this.max;
|
||||
}
|
||||
this.setSinglePosition(this.value);
|
||||
}
|
||||
},
|
||||
sliderClick (event) {
|
||||
if (this.disabled) return;
|
||||
const currentX = event.clientX;
|
||||
const sliderOffsetLeft = this.$els.slider.getBoundingClientRect().left;
|
||||
const newPos = (currentX - sliderOffsetLeft) / this.sliderWidth * 100;
|
||||
|
||||
if (this.range) {
|
||||
let type = '';
|
||||
if (newPos <= this.firstPosition) {
|
||||
type = 'First';
|
||||
} else if (newPos >= this.secondPosition) {
|
||||
type = 'Second';
|
||||
} else {
|
||||
if ((newPos - this.firstPosition) <= (this.secondPosition - newPos)) {
|
||||
type = 'First';
|
||||
} else {
|
||||
type = 'Second';
|
||||
}
|
||||
}
|
||||
this[`change${type}Position`](newPos);
|
||||
} else {
|
||||
this.changeSinglePosition(newPos);
|
||||
}
|
||||
},
|
||||
// for single use
|
||||
onSingleButtonDown (event) {
|
||||
if (this.disabled) return;
|
||||
this.onSingleDragStart(event);
|
||||
window.addEventListener('mousemove', this.onSingleDragging);
|
||||
window.addEventListener('mouseup', this.onSingleDragEnd);
|
||||
},
|
||||
onSingleDragStart (event) {
|
||||
this.dragging = true;
|
||||
this.startX = event.clientX;
|
||||
this.startPos = parseInt(this.singlePosition, 10);
|
||||
},
|
||||
onSingleDragging (event) {
|
||||
if (this.dragging) {
|
||||
this.$refs.tooltip.visible = true;
|
||||
this.currentX = event.clientX;
|
||||
const diff = (this.currentX - this.startX) / this.sliderWidth * 100;
|
||||
this.newPos = this.startPos + diff;
|
||||
this.changeSinglePosition(this.newPos);
|
||||
}
|
||||
},
|
||||
onSingleDragEnd () {
|
||||
if (this.dragging) {
|
||||
this.dragging = false;
|
||||
this.$refs.tooltip.visible = false;
|
||||
this.changeSinglePosition(this.newPos);
|
||||
window.removeEventListener('mousemove', this.onSingleDragging);
|
||||
window.removeEventListener('mouseup', this.onSingleDragEnd);
|
||||
}
|
||||
},
|
||||
changeSinglePosition (newPos) {
|
||||
if (newPos >= 0 && (newPos <= 100)) {
|
||||
const lengthPerStep = 100 / ((this.max - this.min) / this.step);
|
||||
const steps = Math.round(newPos / lengthPerStep);
|
||||
|
||||
this.value = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
|
||||
this.setSinglePosition(this.value);
|
||||
if (!this.dragging) {
|
||||
if (this.value !== this.oldSingleValue) {
|
||||
this.$emit('on-change', this.value);
|
||||
this.oldSingleValue = this.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setSinglePosition (val) {
|
||||
this.singlePosition = (val - this.min) / (this.max - this.min) * 100;
|
||||
},
|
||||
handleInputChange (val) {
|
||||
this.value = val;
|
||||
this.setSinglePosition(val);
|
||||
this.$emit('on-change', this.value);
|
||||
},
|
||||
// for range use first
|
||||
onFirstButtonDown (event) {
|
||||
if (this.disabled) return;
|
||||
this.onFirstDragStart(event);
|
||||
window.addEventListener('mousemove', this.onFirstDragging);
|
||||
window.addEventListener('mouseup', this.onFirstDragEnd);
|
||||
},
|
||||
onFirstDragStart (event) {
|
||||
this.firstDragging = true;
|
||||
this.startX = event.clientX;
|
||||
this.startPos = parseInt(this.firstPosition, 10);
|
||||
},
|
||||
onFirstDragging (event) {
|
||||
if (this.firstDragging) {
|
||||
this.$refs.tooltip.visible = true;
|
||||
this.currentX = event.clientX;
|
||||
const diff = (this.currentX - this.startX) / this.sliderWidth * 100;
|
||||
this.newPos = this.startPos + diff;
|
||||
this.changeFirstPosition(this.newPos);
|
||||
}
|
||||
},
|
||||
onFirstDragEnd () {
|
||||
if (this.firstDragging) {
|
||||
this.firstDragging = false;
|
||||
this.$refs.tooltip.visible = false;
|
||||
this.changeFirstPosition(this.newPos);
|
||||
window.removeEventListener('mousemove', this.onFirstDragging);
|
||||
window.removeEventListener('mouseup', this.onFirstDragEnd);
|
||||
}
|
||||
},
|
||||
changeFirstPosition (newPos) {
|
||||
if (newPos >= 0 && (newPos <= this.secondPosition)) {
|
||||
const lengthPerStep = 100 / ((this.max - this.min) / this.step);
|
||||
const steps = Math.round(newPos / lengthPerStep);
|
||||
|
||||
this.value = [Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min), this.value[1]];
|
||||
this.setFirstPosition(this.value[0]);
|
||||
if (!this.firstDragging) {
|
||||
if (this.value[0] !== this.oldFirstValue) {
|
||||
this.$emit('on-change', this.value);
|
||||
this.oldFirstValue = this.value[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setFirstPosition (val) {
|
||||
this.firstPosition = (val - this.min) / (this.max - this.min) * 100;
|
||||
},
|
||||
// for range use second
|
||||
onSecondButtonDown (event) {
|
||||
if (this.disabled) return;
|
||||
this.onSecondDragStart(event);
|
||||
window.addEventListener('mousemove', this.onSecondDragging);
|
||||
window.addEventListener('mouseup', this.onSecondDragEnd);
|
||||
},
|
||||
onSecondDragStart (event) {
|
||||
this.secondDragging = true;
|
||||
this.startX = event.clientX;
|
||||
this.startPos = parseInt(this.secondPosition, 10);
|
||||
},
|
||||
onSecondDragging (event) {
|
||||
if (this.secondDragging) {
|
||||
this.$refs.tooltip2.visible = true;
|
||||
this.currentX = event.clientX;
|
||||
const diff = (this.currentX - this.startX) / this.sliderWidth * 100;
|
||||
this.newPos = this.startPos + diff;
|
||||
this.changeSecondPosition(this.newPos);
|
||||
}
|
||||
},
|
||||
onSecondDragEnd () {
|
||||
if (this.secondDragging) {
|
||||
this.secondDragging = false;
|
||||
this.$refs.tooltip2.visible = false;
|
||||
this.changeSecondPosition(this.newPos);
|
||||
window.removeEventListener('mousemove', this.onSecondDragging);
|
||||
window.removeEventListener('mouseup', this.onSecondDragEnd);
|
||||
}
|
||||
},
|
||||
changeSecondPosition (newPos) {
|
||||
if (newPos >= this.firstPosition && (newPos <= 100)) {
|
||||
const lengthPerStep = 100 / ((this.max - this.min) / this.step);
|
||||
const steps = Math.round(newPos / lengthPerStep);
|
||||
|
||||
this.value = [this.value[0], Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min)];
|
||||
this.setSecondPosition(this.value[1]);
|
||||
if (!this.secondDragging) {
|
||||
if (this.value[1] !== this.oldSecondValue) {
|
||||
this.$emit('on-change', this.value);
|
||||
this.oldSecondValue = this.value[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setSecondPosition (val) {
|
||||
this.secondPosition = (val - this.min) / (this.max - this.min) * 100;
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
if (this.range) {
|
||||
const isArray = Array.isArray(this.value);
|
||||
if (!isArray || (isArray && this.value.length != 2) || (isArray && (!isNaN(this.value[0]) || !isNaN(this.value[1])))) {
|
||||
this.value = [0, 0];
|
||||
if (!isArray || (isArray && this.value.length != 2) || (isArray && (isNaN(this.value[0]) || isNaN(this.value[1])))) {
|
||||
this.value = [this.min, this.max];
|
||||
} else {
|
||||
this.updateValue(this.value, true);
|
||||
}
|
||||
} else {
|
||||
if (typeof this.value !== 'number') {
|
||||
this.value = this.min;
|
||||
}
|
||||
this.updateValue(this.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue