Slider: Keyboard control like native
This commit is contained in:
parent
f0c2af9d2d
commit
791d254e64
2 changed files with 77 additions and 11 deletions
|
@ -8,20 +8,44 @@
|
|||
:value="exportValue[0]"
|
||||
:disabled="disabled"
|
||||
@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="exportValue">
|
||||
<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>
|
||||
<div :class="[prefixCls + '-bar']" :style="barStyle" @click.self="sliderClick"></div>
|
||||
<div
|
||||
:class="[prefixCls + '-bar']"
|
||||
:style="barStyle"
|
||||
@click.self="sliderClick"></div>
|
||||
<div
|
||||
:class="[prefixCls + '-button-wrap']"
|
||||
:style="{left: minPosition + '%'}"
|
||||
@touchstart="onPointerDown($event, 'min')"
|
||||
@mousedown="onPointerDown($event, 'min')">
|
||||
<Tooltip :controlled="pointerDown === 'min'" placement="top" :content="tipFormat(exportValue[0])"
|
||||
:disabled="tipDisabled" :always="showTip === 'always'" ref="minTooltip">
|
||||
<div :class="minButtonClasses"></div>
|
||||
<Tooltip
|
||||
:controlled="pointerDown === 'min'"
|
||||
placement="top"
|
||||
:content="tipFormat(exportValue[0])"
|
||||
:disabled="tipDisabled"
|
||||
:always="showTip === 'always'"
|
||||
ref="minTooltip"
|
||||
>
|
||||
<div
|
||||
:class="minButtonClasses"
|
||||
tabindex="0"
|
||||
@keydown.left="onKeyLeft($event, 'min')"
|
||||
@keydown.down="onKeyLeft($event, 'min')"
|
||||
@keydown.right="onKeyRight($event, 'min')"
|
||||
@keydown.up="onKeyRight($event, 'min')"
|
||||
></div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div v-if="range"
|
||||
|
@ -29,9 +53,22 @@
|
|||
:style="{left: maxPosition + '%'}"
|
||||
@touchstart="onPointerDown($event, 'max')"
|
||||
@mousedown="onPointerDown($event, 'max')">
|
||||
<Tooltip :controlled="pointerDown === 'max'" placement="top" :content="tipFormat(exportValue[1])"
|
||||
:disabled="tipDisabled" :always="showTip === 'always'" ref="maxTooltip">
|
||||
<div :class="maxButtonClasses"></div>
|
||||
<Tooltip
|
||||
:controlled="pointerDown === 'max'"
|
||||
placement="top"
|
||||
:content="tipFormat(exportValue[1])"
|
||||
:disabled="tipDisabled"
|
||||
:always="showTip === 'always'"
|
||||
ref="maxTooltip"
|
||||
>
|
||||
<div
|
||||
:class="maxButtonClasses"
|
||||
tabindex="0"
|
||||
@keydown.left="onKeyLeft($event, 'max')"
|
||||
@keydown.down="onKeyLeft($event, 'max')"
|
||||
@keydown.right="onKeyRight($event, 'max')"
|
||||
@keydown.up="onKeyRight($event, 'max')"
|
||||
></div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -110,7 +147,11 @@
|
|||
startX: 0,
|
||||
currentX: 0,
|
||||
startPos: 0,
|
||||
oldValue: val
|
||||
oldValue: val,
|
||||
valueIndex: {
|
||||
min: 0,
|
||||
max: 1,
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
@ -173,7 +214,6 @@
|
|||
return (val[1] - this.min) / this.valueRange * 100;
|
||||
},
|
||||
barStyle () {
|
||||
|
||||
const style = {
|
||||
width: (this.currentValue[0] - this.min) / this.valueRange * 100 + '%'
|
||||
};
|
||||
|
@ -216,6 +256,30 @@
|
|||
max = Math.min(this.max, max);
|
||||
return [min, max];
|
||||
},
|
||||
getCurrentValue (event, type) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const index = this.valueIndex[type];
|
||||
if (typeof index === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
return this.currentValue[index];
|
||||
},
|
||||
onKeyLeft (event, type) {
|
||||
const value = this.getCurrentValue(event, type);
|
||||
if (Number.isFinite(value)) {
|
||||
this.changeButtonPosition(value - this.step, type);
|
||||
}
|
||||
},
|
||||
onKeyRight (event, type) {
|
||||
const value = this.getCurrentValue(event, type);
|
||||
if (Number.isFinite(value)) {
|
||||
this.changeButtonPosition(value + this.step, type);
|
||||
}
|
||||
},
|
||||
onPointerDown (event, type) {
|
||||
if (this.disabled) return;
|
||||
event.preventDefault();
|
||||
|
|
|
@ -34,7 +34,9 @@
|
|||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
transition: all @transition-time linear;
|
||||
outline: 0;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&-dragging
|
||||
{
|
||||
|
|
Loading…
Add table
Reference in a new issue