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

Merge pull request #3043 from iview/pr/3027

Browse source 
Pr/3027
This commit is contained in:
Aresn 2018-02-26 12:03:09 +08:00 committed by GitHub
commit 899ad697b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 179 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
examples/routers/slider.vue
View file

@ -1,68 +1,103 @@
<!--<template>-->
<!--<div style="margin: 0 400px;">-->
<!--<Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>-->
<!--<Button @click="randomSingle">change</Button> {{singleDisplayValue}}-->
<template>
<Form :model="formItem" :label-width="80">
<FormItem label="Input">
<Input v-model="formItem.input" placeholder="Enter something..."></Input>
</FormItem>
<FormItem label="Select">
<Select v-model="formItem.select">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
<FormItem label="DatePicker">
<Row>
<Col span="11">
<DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
</Col>
</Row>
</FormItem>
<FormItem label="Radio">
<RadioGroup v-model="formItem.radio">
<Radio label="male">Male</Radio>
<Radio label="female">Female</Radio>
</RadioGroup>
</FormItem>
<FormItem label="Checkbox">
<CheckboxGroup v-model="formItem.checkbox">
<Checkbox label="Eat"></Checkbox>
<Checkbox label="Sleep"></Checkbox>
<Checkbox label="Run"></Checkbox>
<Checkbox label="Movie"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem label="Switch">
<i-switch v-model="formItem.switch" size="large">
<span slot="open">On</span>
<span slot="close">Off</span>
</i-switch>
</FormItem>
<FormItem label="Slider">
<Slider v-model="formItem.slider" range></Slider>
</FormItem>
<FormItem label="Text">
<Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
</FormItem>
<FormItem>
<Button type="primary">Submit</Button>
<Button type="ghost" style="margin-left: 8px">Cancel</Button>
</FormItem>
</Form>
</template>
<script>
export default {
data () {
return {
formItem: {
input: '',
select: '',
radio: 'male',
checkbox: [],
switch: true,
date: '',
time: '',
slider: [20, 50],
textarea: ''
}
}
}
}
</script>
<!--<Slider v-model="valueRange" range @on-change="updateRangeDisplayValue"></Slider>-->
<!--<Button @click="randomRange">change</Button> {{rangeDisplayValue}}-->
<!--<template>-->
<!--<div>-->
<!--<Button type="primary" @click="modal1 = true">Display dialog box</Button>-->
<!--<Modal v-model="modal1">-->
<!--<Slider v-model="value2" range show-tip="always"></Slider>-->
<!--</Modal>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--valueSingle: 10,-->
<!--valueRange: [20, 50],-->
<!--singleDisplayValue: 10,-->
<!--rangeDisplayValue: [20, 50]-->
<!--};-->
<!--modal1: false,-->
<!--value2: [20, 50],-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--updateSingleDisplayValue (val){-->
<!--console.log('updateSingleDisplayValue', val);-->
<!--this.singleDisplayValue = val;-->
<!--ok () {-->
<!--this.$Message.info('Clicked ok');-->
<!--},-->
<!--updateRangeDisplayValue (val){-->
<!--console.log('updateRangeDisplayValue', val);-->
<!--this.rangeDisplayValue = val.join(' - ');-->
<!--},-->
<!--randomSingle () {-->
<!--this.valueSingle = this.random(0, 100);-->
<!--},-->
<!--randomRange () {-->
<!--this.valueRange = [this.random(0, 50), this.random(50, 100)];-->
<!--},-->
<!--random (min, max){-->
<!--return Math.round(Math.random() * (max - min)) + min;-->
<!--cancel () {-->
<!--this.$Message.info('Clicked cancel');-->
<!--}-->
<!--}-->
<!--};-->
<!--}-->
<!--</script>-->
<template>
<div>
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Modal v-model="modal1">
<Slider v-model="value2" range show-tip="always"></Slider>
</Modal>
</div>
</template>
<script>
export default {
data () {
return {
modal1: false,
value2: [20, 50],
}
},
methods: {
ok () {
this.$Message.info('Clicked ok');
},
cancel () {
this.$Message.info('Clicked cancel');
}
}
}
</script>

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

@ -8,20 +8,46 @@
: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"
@focus="handleFocus('min')"
@blur="handleBlur('min')"
@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 +55,24 @@
: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"
@focus="handleFocus('max')"
@blur="handleBlur('max')"
@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 +151,11 @@
startX: 0,
currentX: 0,
startPos: 0,
oldValue: val
oldValue: val,
valueIndex: {
min: 0,
max: 1,
},
};
},
watch: {
@ -173,7 +218,6 @@
return (val[1] - this.min) / this.valueRange * 100;
},
barStyle () {
const style = {
width: (this.currentValue[0] - this.min) / this.valueRange * 100 + '%'
};
@ -216,6 +260,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();
@ -293,6 +361,14 @@
this.currentValue = [val, this.currentValue[1]];
this.emitChange();
},
handleFocus (type) {
this.$refs[`${type}Tooltip`].handleShowPopper();
},
handleBlur (type) {
this.$refs[`${type}Tooltip`].handleClosePopper();
}
},
mounted () {
// #2852

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
{