other / mew-iview

Commit 73772536d6314388726a46363ea7b820451b97b7

Authored by 梁灏
1 parent b79b53ea

optimize Slider that sometime Tooltip shaking 

optimize Slider that sometime Tooltip shaking（add controlled prop in
Tooltip component）
Showing 3 changed files with 11 additions and 5 deletions   Show diff stats
Inline Side-by-side
src/components/slider/slider.vue
  Show/Hide comments   View file @7377253
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 :class="[prefixCls + '-button-wrap']" 18 :class="[prefixCls + '-button-wrap']"
19 :style="{left: firstPosition + '%'}" 19 :style="{left: firstPosition + '%'}"
20 @mousedown="onFirstButtonDown"> 20 @mousedown="onFirstButtonDown">
21 - <Tooltip placement="top" :content="tipFormat(value[0])" :disabled="tipFormat(value[0]) === null" v-ref:tooltip> 21 + <Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(value[0])" :disabled="tipFormat(value[0]) === null" v-ref:tooltip>
22 <div :class="button1Classes"></div> 22 <div :class="button1Classes"></div>
23 </Tooltip> 23 </Tooltip>
24 </div> 24 </div>
@@ -26,7 +26,7 @@ @@ -26,7 +26,7 @@
26 :class="[prefixCls + '-button-wrap']" 26 :class="[prefixCls + '-button-wrap']"
27 :style="{left: secondPosition + '%'}" 27 :style="{left: secondPosition + '%'}"
28 @mousedown="onSecondButtonDown"> 28 @mousedown="onSecondButtonDown">
29 - <Tooltip placement="top" :content="tipFormat(value[1])" :disabled="tipFormat(value[1]) === null" v-ref:tooltip2> 29 + <Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(value[1])" :disabled="tipFormat(value[1]) === null" v-ref:tooltip2>
30 <div :class="button2Classes"></div> 30 <div :class="button2Classes"></div>
31 </Tooltip> 31 </Tooltip>
32 </div> 32 </div>
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 :class="[prefixCls + '-button-wrap']" 36 :class="[prefixCls + '-button-wrap']"
37 :style="{left: singlePosition + '%'}" 37 :style="{left: singlePosition + '%'}"
38 @mousedown="onSingleButtonDown"> 38 @mousedown="onSingleButtonDown">
39 - <Tooltip placement="top" :content="tipFormat(value)" :disabled="tipFormat(value) === null" v-ref:tooltip> 39 + <Tooltip :controlled="dragging" placement="top" :content="tipFormat(value)" :disabled="tipFormat(value) === null" v-ref:tooltip>
40 <div :class="buttonClasses"></div> 40 <div :class="buttonClasses"></div>
41 </Tooltip> 41 </Tooltip>
42 </div> 42 </div>
src/components/tooltip/tooltip.vue
  Show/Hide comments   View file @7377253
@@ -37,6 +37,10 @@ @@ -37,6 +37,10 @@
37 disabled: { 37 disabled: {
38 type: Boolean, 38 type: Boolean,
39 default: false 39 default: false
  40 + },
  41 + controlled: { // under this prop,Tooltip will not close when mouseleave
  42 + type: Boolean,
  43 + default: false
40 } 44 }
41 }, 45 },
42 data () { 46 data () {
@@ -52,7 +56,9 @@ @@ -52,7 +56,9 @@
52 }, 56 },
53 handleClosePopper() { 57 handleClosePopper() {
54 clearTimeout(this.timeout); 58 clearTimeout(this.timeout);
55 - this.visible = false; 59 + if (!this.controlled) {
  60 + this.visible = false;
  61 + }
56 } 62 }
57 } 63 }
58 } 64 }
test/routers/slider.vue
  Show/Hide comments   View file @7377253
1 <template> 1 <template>
2 <div style="width: 400px;margin:100px;"> 2 <div style="width: 400px;margin:100px;">
3 {{ value }} 3 {{ value }}
4 - <Slider @on-change="change"></Slider> 4 + <Slider @on-change="change" :step="15"></Slider>
5 <Slider :value="40" :tip-format="format"></Slider> 5 <Slider :value="40" :tip-format="format"></Slider>
6 <Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider> 6 <Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>
7 <!--<Slider :max="10"></Slider>--> 7 <!--<Slider :max="10"></Slider>-->