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

Slider can show stop dot

Browse source 
Slider can show stop dot
This commit is contained in:
梁灏 2016-11-11 16:14:25 +08:00
parent c31856ea76
commit 41d90ccf1e
6 changed files with 28 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/styles/iview.all.css
View file

File diff suppressed because one or more lines are too long

2
dist/styles/iview.css
View file

File diff suppressed because one or more lines are too long

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

@ -163,7 +163,22 @@
return style;
},
stops() {
return this.max / this.step;
// let stopCount = (this.max - this.value) / this.step;
// let result = [];
// let currentLeft = parseFloat(this.singlePosition);
// let stepWidth = 100 * this.step / (this.max - this.min);
// for (let i = 1; i < stopCount; i++) {
// result.push(currentLeft + i * stepWidth);
// }
// return result;
let stopCount = (this.max - this.min) / this.step;
let result = [];
let stepWidth = 100 * this.step / (this.max - this.min);
for (let i = 1; i < stopCount; i++) {
result.push(i * stepWidth);
}
return result;
},
sliderWidth () {
return parseInt(getStyle(this.$els.slider, 'width'), 10);

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

@ -57,6 +57,14 @@
border-radius: @btn-border-radius-small;
position: absolute;
}
&-stop{
position: absolute;
.square(@slider-height);
border-radius: 50%;
background-color: @slider-disabled-color;
.transform(translateX(-50%));
}
}
.@{slider-prefix-cls}-disabled{

2
src/styles/themes/default/custom.less
View file

@ -123,7 +123,7 @@
@ease-in-out : ease-in-out;
// Slider
@slider-color : fade(@primary-color, 80%);
@slider-color : tint(@primary-color, 20%);
@slider-height : 4px;
@slider-margin : 16px 0;
@slider-button-wrap-size : 18px;

2
test/routers/slider.vue
View file

@ -2,7 +2,7 @@
<div style="width: 400px;margin:100px;">
{{ value }}
<Slider @on-change="change" :step="10" show-stops></Slider>
<Slider :value.sync="value" show-input range @on-change="change" :step="13"></Slider>
<Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>
<!--<Slider :max="10"></Slider>-->
<!--<Slider :step="13"></Slider>-->
<!--<Slider :step="13" :max="60"></Slider>-->