chenhaodong / 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 18 :class="[prefixCls + '-button-wrap']"
19 19 :style="{left: firstPosition + '%'}"
20 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 22 <div :class="button1Classes"></div>
23 23 </Tooltip>
24 24 </div>
... ... @@ -26,7 +26,7 @@
26 26 :class="[prefixCls + '-button-wrap']"
27 27 :style="{left: secondPosition + '%'}"
28 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 30 <div :class="button2Classes"></div>
31 31 </Tooltip>
32 32 </div>
... ... @@ -36,7 +36,7 @@
36 36 :class="[prefixCls + '-button-wrap']"
37 37 :style="{left: singlePosition + '%'}"
38 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 40 <div :class="buttonClasses"></div>
41 41 </Tooltip>
42 42 </div>
... ...
src/components/tooltip/tooltip.vue
  Show/Hide comments   View file @7377253
... ... @@ -37,6 +37,10 @@
37 37 disabled: {
38 38 type: Boolean,
39 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 46 data () {
... ... @@ -52,7 +56,9 @@
52 56 },
53 57 handleClosePopper() {
54 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 1 <template>
2 2 <div style="width: 400px;margin:100px;">
3 3 {{ value }}
4   - <Slider @on-change="change"></Slider>
  4 + <Slider @on-change="change" :step="15"></Slider>
5 5 <Slider :value="40" :tip-format="format"></Slider>
6 6 <Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>
7 7 <!--<Slider :max="10"></Slider>-->
... ...