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

Slider: Keyboard control like native

Browse source
This commit is contained in:
Graham Fairweather 2018-02-09 08:41:40 +01:00
parent f0c2af9d2d
commit 791d254e64
2 changed files with 77 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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();

2
src/styles/components/slider.less
View file

@ -34,7 +34,9 @@
border-radius: 50%;
background-color: #fff;
transition: all @transition-time linear;
outline: 0;
&:focus,
&:hover,
&-dragging
{