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

support Slider

Browse source 
support Slider
This commit is contained in:
梁灏 2017-03-03 15:52:19 +08:00
parent 79288d43dd
commit 1c803cdfb0
3 changed files with 85 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/base/popper.js
View file

@ -28,7 +28,7 @@ export default {
default () { default () {
return { return {
gpuAcceleration: false, gpuAcceleration: false,
// boundariesElement: 'body' // todo 暂时注释，发现在 vue 2 里方向暂时可以自动识别了，待验证 boundariesElement: 'body' // todo 暂时注释，发现在 vue 2 里方向暂时可以自动识别了，待验证(还是有问题的)
}; };
} }
}, },

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

@ -5,10 +5,10 @@
:min="min" :min="min"
:max="max" :max="max"
:step="step" :step="step"
:value="value" :value="currentValue"
:disabled="disabled" :disabled="disabled"
@on-change="handleInputChange"></Input-number> @on-change="handleInputChange"></Input-number>
<div :class="[prefixCls + '-wrap']" v-el:slider @click.self="sliderClick"> <div :class="[prefixCls + '-wrap']" ref="slider" @click.self="sliderClick">
<template v-if="showStops"> <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> </template>
@ -18,7 +18,7 @@
:class="[prefixCls + '-button-wrap']" :class="[prefixCls + '-button-wrap']"
:style="{left: firstPosition + '%'}" :style="{left: firstPosition + '%'}"
@mousedown="onFirstButtonDown"> @mousedown="onFirstButtonDown">
<Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(value[0])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip> <Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(currentValue[0])" :disabled="tipDisabled" :always="showTip === 'always'" ref="tooltip">
<div :class="button1Classes"></div> <div :class="button1Classes"></div>
</Tooltip> </Tooltip>
</div> </div>
@ -26,7 +26,7 @@
:class="[prefixCls + '-button-wrap']" :class="[prefixCls + '-button-wrap']"
:style="{left: secondPosition + '%'}" :style="{left: secondPosition + '%'}"
@mousedown="onSecondButtonDown"> @mousedown="onSecondButtonDown">
<Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(value[1])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip2> <Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(currentValue[1])" :disabled="tipDisabled" :always="showTip === 'always'" ref="tooltip2">
<div :class="button2Classes"></div> <div :class="button2Classes"></div>
</Tooltip> </Tooltip>
</div> </div>
@ -36,7 +36,7 @@
:class="[prefixCls + '-button-wrap']" :class="[prefixCls + '-button-wrap']"
:style="{left: singlePosition + '%'}" :style="{left: singlePosition + '%'}"
@mousedown="onSingleButtonDown"> @mousedown="onSingleButtonDown">
<Tooltip :controlled="dragging" placement="top" :content="tipFormat(value)" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip> <Tooltip :controlled="dragging" placement="top" :content="tipFormat(currentValue)" :disabled="tipDisabled" :always="showTip === 'always'" ref="tooltip">
<div :class="buttonClasses"></div> <div :class="buttonClasses"></div>
</Tooltip> </Tooltip>
</div> </div>
@ -103,6 +103,7 @@
data () { data () {
return { return {
prefixCls: prefixCls, prefixCls: prefixCls,
currentValue: this.value,
dragging: false, dragging: false,
firstDragging: false, firstDragging: false,
secondDragging: false, secondDragging: false,
@ -118,6 +119,22 @@
secondPosition: (this.value[1] - this.min) / (this.max - this.min) * 100 secondPosition: (this.value[1] - this.min) / (this.max - this.min) * 100
}; };
}, },
watch: {
value (val) {
this.currentValue = val;
},
currentValue (val) {
this.$nextTick(() => {
this.$refs.tooltip.updatePopper();
if (this.range) {
this.$refs.tooltip2.updatePopper();
}
});
this.updateValue(val);
this.$emit('input', val);
this.$emit('on-input', val);
}
},
computed: { computed: {
classes () { classes () {
return [ return [
@ -158,12 +175,12 @@
if (this.range) { if (this.range) {
style = { style = {
width: (this.value[1] - this.value[0]) / (this.max - this.min) * 100 + '%', width: (this.currentValue[1] - this.currentValue[0]) / (this.max - this.min) * 100 + '%',
left: (this.value[0] - this.min) / (this.max - this.min) * 100 + '%' left: (this.currentValue[0] - this.min) / (this.max - this.min) * 100 + '%'
}; };
} else { } else {
style = { style = {
width: (this.value - this.min) / (this.max - this.min) * 100 + '%' width: (this.currentValue - this.min) / (this.max - this.min) * 100 + '%'
}; };
} }
@ -179,22 +196,10 @@
return result; return result;
}, },
sliderWidth () { sliderWidth () {
return parseInt(getStyle(this.$els.slider, 'width'), 10); return parseInt(getStyle(this.$refs.slider, 'width'), 10);
}, },
tipDisabled () { tipDisabled () {
return this.tipFormat(this.value[0]) === null || this.showTip === 'never'; return this.tipFormat(this.currentValue[0]) === null || this.showTip === 'never';
}
},
watch: {
value (val) {
this.$nextTick(() => {
this.$refs.tooltip.updatePopper();
if (this.range) {
this.$refs.tooltip2.updatePopper();
}
});
this.updateValue(val);
this.$emit('on-input', this.value);
} }
}, },
methods: { methods: {
@ -224,23 +229,23 @@
} }
if (this.value[0] === value[0] && this.value[1] === value[1]) return; if (this.value[0] === value[0] && this.value[1] === value[1]) return;
this.value = value; this.currentValue = value;
this.setFirstPosition(this.value[0]); this.setFirstPosition(this.currentValue[0]);
this.setSecondPosition(this.value[1]); this.setSecondPosition(this.currentValue[1]);
} else { } else {
if (val < this.min) { if (val < this.min) {
this.value = this.min; this.currentValue = this.min;
} }
if (val > this.max) { if (val > this.max) {
this.value = this.max; this.currentValue = this.max;
} }
this.setSinglePosition(this.value); this.setSinglePosition(this.currentValue);
} }
}, },
sliderClick (event) { sliderClick (event) {
if (this.disabled) return; if (this.disabled) return;
const currentX = event.clientX; const currentX = event.clientX;
const sliderOffsetLeft = this.$els.slider.getBoundingClientRect().left; const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
const newPos = (currentX - sliderOffsetLeft) / this.sliderWidth * 100; const newPos = (currentX - sliderOffsetLeft) / this.sliderWidth * 100;
if (this.range) { if (this.range) {
@ -297,13 +302,14 @@
const lengthPerStep = 100 / ((this.max - this.min) / this.step); const lengthPerStep = 100 / ((this.max - this.min) / this.step);
const steps = Math.round(newPos / lengthPerStep); const steps = Math.round(newPos / lengthPerStep);
this.value = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min); this.currentValue = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
this.setSinglePosition(this.value); this.setSinglePosition(this.currentValue);
if (!this.dragging) { if (!this.dragging) {
if (this.value !== this.oldSingleValue) { if (this.currentValue !== this.oldSingleValue) {
this.$emit('on-change', this.value); this.$emit('on-change', this.currentValue);
this.$dispatch('on-form-change', this.value); // todo 事件
this.oldSingleValue = this.value; // this.$dispatch('on-form-change', this.currentValue);
this.oldSingleValue = this.currentValue;
} }
} }
} }
@ -312,10 +318,11 @@
this.singlePosition = (val - this.min) / (this.max - this.min) * 100; this.singlePosition = (val - this.min) / (this.max - this.min) * 100;
}, },
handleInputChange (val) { handleInputChange (val) {
this.value = val; this.currentValue = val;
this.setSinglePosition(val); this.setSinglePosition(val);
this.$emit('on-change', this.value); this.$emit('on-change', this.currentValue);
this.$dispatch('on-form-change', this.value); // todo 事件
// this.$dispatch('on-form-change', this.currentValue);
}, },
// for range use first // for range use first
onFirstButtonDown (event) { onFirstButtonDown (event) {
@ -353,13 +360,14 @@
const lengthPerStep = 100 / ((this.max - this.min) / this.step); const lengthPerStep = 100 / ((this.max - this.min) / this.step);
const steps = Math.round(newPos / lengthPerStep); const steps = Math.round(newPos / lengthPerStep);
this.value = [Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min), this.value[1]]; this.currentValue = [Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min), this.currentValue[1]];
this.setFirstPosition(this.value[0]); this.setFirstPosition(this.currentValue[0]);
if (!this.firstDragging) { if (!this.firstDragging) {
if (this.value[0] !== this.oldFirstValue) { if (this.currentValue[0] !== this.oldFirstValue) {
this.$emit('on-change', this.value); this.$emit('on-change', this.currentValue);
this.$dispatch('on-form-change', this.value); // todo 事件
this.oldFirstValue = this.value[0]; // this.$dispatch('on-form-change', this.currentValue);
this.oldFirstValue = this.currentValue[0];
} }
} }
} }
@ -403,13 +411,14 @@
const lengthPerStep = 100 / ((this.max - this.min) / this.step); const lengthPerStep = 100 / ((this.max - this.min) / this.step);
const steps = Math.round(newPos / lengthPerStep); const steps = Math.round(newPos / lengthPerStep);
this.value = [this.value[0], Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min)]; this.currentValue = [this.currentValue[0], Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min)];
this.setSecondPosition(this.value[1]); this.setSecondPosition(this.currentValue[1]);
if (!this.secondDragging) { if (!this.secondDragging) {
if (this.value[1] !== this.oldSecondValue) { if (this.currentValue[1] !== this.oldSecondValue) {
this.$emit('on-change', this.value); this.$emit('on-change', this.currentValue);
this.$dispatch('on-form-change', this.value); // todo 事件
this.oldSecondValue = this.value[1]; // this.$dispatch('on-form-change', this.currentValue);
this.oldSecondValue = this.currentValue[1];
} }
} }
} }
@ -418,19 +427,19 @@
this.secondPosition = (val - this.min) / (this.max - this.min) * 100; this.secondPosition = (val - this.min) / (this.max - this.min) * 100;
} }
}, },
ready () { mounted () {
if (this.range) { if (this.range) {
const isArray = Array.isArray(this.value); const isArray = Array.isArray(this.currentValue);
if (!isArray || (isArray && this.value.length != 2) || (isArray && (isNaN(this.value[0]) || isNaN(this.value[1])))) { if (!isArray || (isArray && this.currentValue.length != 2) || (isArray && (isNaN(this.currentValue[0]) || isNaN(this.currentValue[1])))) {
this.value = [this.min, this.max]; this.currentValue = [this.min, this.max];
} else { } else {
this.updateValue(this.value, true); this.updateValue(this.currentValue, true);
} }
} else { } else {
if (typeof this.value !== 'number') { if (typeof this.currentValue !== 'number') {
this.value = this.min; this.currentValue = this.min;
} }
this.updateValue(this.value); this.updateValue(this.currentValue);
} }
} }
}; };

45
test/routers/slider.vue
View file

@ -1,43 +1,32 @@
<template> <template>
<div style="width: 140px;margin:100px;"> <div style="margin: 100px;">
{{ value }} <Slider v-model="value1" :step="5" show-input></Slider>
<Slider @on-change="change" @on-input="input" :step="15"></Slider> <Slider v-model="value2" range></Slider>
<Slider :value="40" :tip-format="format"></Slider> <Slider v-model="value3" range disabled></Slider>
<Slider :value.sync="value" show-input show-stops range @on-change="change" @on-input="input" :step="13"></Slider> {{ value1 }}{{value2}}
<Slider :max="10"></Slider> <div @click="value1 = 13">change value1</div>
<Slider :step="13"></Slider> <br>
<Slider :step="13" :max="60"></Slider> <Slider :value="value9" :tip-format="format"></Slider>
<Icon type="checkmark-circled" size="40" color="#f60"></Icon> <Slider :value="value10" :tip-format="hideFormat"></Slider>
<p>附近的首付款是东方红看就是</p>
<div class="ivu-article">
<a href="http://www.iviewui.com" target="_blank">iView</a>
</div>
<Slider :value="75"></Slider>
<Slider :value="[20, 50]" range></Slider>
<Slider :value="[20, 50]" show-tip="always"></Slider>
<Slider :value="[20, 50]" show-tip="hover"></Slider>
<Slider :value="[20, 50]" show-tip="never"></Slider>
</div> </div>
</template> </template>
<script> <script>
import { Slider, Icon } from 'iview';
export default { export default {
components: { Slider, Icon },
data () { data () {
return { return {
value: [20, 50] value1: 25,
value2: [20, 50],
value3: [20, 50],
value9: 25,
value10: 25
} }
}, },
methods: { methods: {
format (val) { format (val) {
return '进度' + val + '%';
},
hideFormat () {
return null; return null;
return `进度：${val}%`
},
change (data) {
console.log(data)
},
input (value) {
console.log(value)
} }
} }
} }