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

Slider support hidden Tooltip when tip-format return null

Browse source 
Slider support hidden Tooltip when tip-format return null
This commit is contained in:
梁灏 2016-11-11 17:40:27 +08:00
parent 41d90ccf1e
commit 5709f32ede
2 changed files with 10 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,17 +8,17 @@
:value="value"
:disabled="disabled"
@on-change="handleInputChange"></Input-number>
<div :class="[prefixCls + '-wrap']" v-el:slider @click="sliderClick">
<div :class="[prefixCls + '-wrap']" v-el:slider @click.self="sliderClick">
<template v-if="showStops">
<div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }"></div>
<div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div>
</template>
<div :class="[prefixCls + '-bar']" :style="barStyle"></div>
<div :class="[prefixCls + '-bar']" :style="barStyle" @click.self="sliderClick"></div>
<template v-if="range">
<div
:class="[prefixCls + '-button-wrap']"
:style="{left: firstPosition + '%'}"
@mousedown="onFirstButtonDown">
<Tooltip placement="top" :content="tipFormat(value[0])" v-ref:tooltip>
<Tooltip placement="top" :content="tipFormat(value[0])" :disabled="tipFormat(value[0]) === null" v-ref:tooltip>
<div :class="button1Classes"></div>
</Tooltip>
</div>
@ -26,7 +26,7 @@
:class="[prefixCls + '-button-wrap']"
:style="{left: secondPosition + '%'}"
@mousedown="onSecondButtonDown">
<Tooltip placement="top" :content="tipFormat(value[1])" v-ref:tooltip2>
<Tooltip placement="top" :content="tipFormat(value[1])" :disabled="tipFormat(value[1]) === null" v-ref:tooltip2>
<div :class="button2Classes"></div>
</Tooltip>
</div>
@ -36,7 +36,7 @@
:class="[prefixCls + '-button-wrap']"
:style="{left: singlePosition + '%'}"
@mousedown="onSingleButtonDown">
<Tooltip placement="top" :content="tipFormat(value)" v-ref:tooltip>
<Tooltip placement="top" :content="tipFormat(value)" :disabled="tipFormat(value) === null" v-ref:tooltip>
<div :class="buttonClasses"></div>
</Tooltip>
</div>
@ -163,15 +163,6 @@
return style;
},
stops() {
// 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);

6
test/routers/slider.vue
View file

@ -1,7 +1,8 @@
<template>
<div style="width: 400px;margin:100px;">
{{ value }}
<Slider @on-change="change" :step="10" show-stops></Slider>
<Slider @on-change="change"></Slider>
<Slider :value="40" :tip-format="format"></Slider>
<Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>
<!--<Slider :max="10"></Slider>-->
<!--<Slider :step="13"></Slider>-->
@ -19,10 +20,11 @@
},
methods: {
format (val) {
return null;
return `进度：${val}%`
},
change (data) {
console.log(data)
// console.log(data)
}
}
}