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" :value="value"
:disabled="disabled" :disabled="disabled"
@on-change="handleInputChange"></Input-number> @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"> <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> </template>
<div :class="[prefixCls + '-bar']" :style="barStyle"></div> <div :class="[prefixCls + '-bar']" :style="barStyle" @click.self="sliderClick"></div>
<template v-if="range"> <template v-if="range">
<div <div
:class="[prefixCls + '-button-wrap']" :class="[prefixCls + '-button-wrap']"
:style="{left: firstPosition + '%'}" :style="{left: firstPosition + '%'}"
@mousedown="onFirstButtonDown"> @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> <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 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> <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 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> <div :class="buttonClasses"></div>
</Tooltip> </Tooltip>
</div> </div>
@ -163,15 +163,6 @@
return style; return style;
}, },
stops() { 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 stopCount = (this.max - this.min) / this.step;
let result = []; let result = [];
let stepWidth = 100 * this.step / (this.max - this.min); let stepWidth = 100 * this.step / (this.max - this.min);

6
test/routers/slider.vue
View file

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