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

optimize Slider that sometime Tooltip shaking

Browse source 
optimize Slider that sometime Tooltip shaking（add controlled prop in
Tooltip component）
This commit is contained in:
梁灏 2016-11-11 18:22:53 +08:00
parent b79b53ea6f
commit 73772536d6
3 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,7 @@
: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])" :disabled="tipFormat(value[0]) === null" v-ref:tooltip> <Tooltip :controlled="firstDragging" 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])" :disabled="tipFormat(value[1]) === null" v-ref:tooltip2> <Tooltip :controlled="secondDragging" 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)" :disabled="tipFormat(value) === null" v-ref:tooltip> <Tooltip :controlled="dragging" placement="top" :content="tipFormat(value)" :disabled="tipFormat(value) === null" v-ref:tooltip>
<div :class="buttonClasses"></div> <div :class="buttonClasses"></div>
</Tooltip> </Tooltip>
</div> </div>

8
src/components/tooltip/tooltip.vue
View file

@ -37,6 +37,10 @@
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
},
controlled: { // under this prop,Tooltip will not close when mouseleave
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -52,7 +56,9 @@
}, },
handleClosePopper() { handleClosePopper() {
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.visible = false; if (!this.controlled) {
this.visible = false;
}
} }
} }
} }

2
test/routers/slider.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div style="width: 400px;margin:100px;"> <div style="width: 400px;margin:100px;">
{{ value }} {{ value }}
<Slider @on-change="change"></Slider> <Slider @on-change="change" :step="15"></Slider>
<Slider :value="40" :tip-format="format"></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>-->