fix: Component initialization triggers the merge tooltip

NightCatSama · Sep 29, 2018 · 1231880 · 1231880
1 parent 226f92c
commit 1231880
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 62 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/example/dist/build.js b/example/dist/build.js
diff --git a/example/src/vue-slider/vue2-slider.vue b/example/src/vue-slider/vue2-slider.vue
@@ -1,8 +1,8 @@
 <template>
-  <div 
-    ref="wrap" 
-    :class="['vue-slider-component', flowDirection, disabledClass, stateClass, { 'vue-slider-has-label': piecewiseLabel }]" 
-    v-show="show" 
+  <div
+    ref="wrap"
+    :class="['vue-slider-component', flowDirection, disabledClass, stateClass, { 'vue-slider-has-label': piecewiseLabel }]"
+    v-show="show"
     :style="[wrapStyles, boolDisabled ? disabledStyle : null]"
     @click="wrapClick"
   >
@@ -12,18 +12,18 @@
           ref="dot0"
           key="dot0"
           :class="[
-            tooltipStatus, 
-            'vue-slider-dot', 
-            { 
-              'vue-slider-dot-focus': focusFlag && focusSlider === 0, 
+            tooltipStatus,
+            'vue-slider-dot',
+            {
+              'vue-slider-dot-focus': focusFlag && focusSlider === 0,
               'vue-slider-dot-dragging': flag && currentSlider === 0,
               'vue-slider-dot-disabled': !boolDisabled && disabledArray[0]
             }
           ]"
           :style="[
             dotStyles,
             (!boolDisabled && disabledArray[0]) ? disabledDotStyles[0] : null,
-            sliderStyles[0], focusFlag && focusSlider === 0 ? focusStyles[0] 
+            sliderStyles[0], focusFlag && focusSlider === 0 ? focusStyles[0]
           : null]"
           @mousedown="moveStart($event, 0)"
           @touchstart="moveStart($event, 0)"
@@ -38,18 +38,18 @@
           ref="dot1"
           key="dot1"
           :class="[
-            tooltipStatus, 
-            'vue-slider-dot', 
-            { 
-              'vue-slider-dot-focus': focusFlag && focusSlider === 1, 
+            tooltipStatus,
+            'vue-slider-dot',
+            {
+              'vue-slider-dot-focus': focusFlag && focusSlider === 1,
               'vue-slider-dot-dragging': flag && currentSlider === 1,
               'vue-slider-dot-disabled': !boolDisabled && disabledArray[1]
             }
           ]"
           :style="[
             dotStyles,
             (!boolDisabled && disabledArray[1]) ? disabledDotStyles[1] : null,
-            sliderStyles[1], focusFlag && focusSlider === 1 ? focusStyles[1] 
+            sliderStyles[1], focusFlag && focusSlider === 1 ? focusStyles[1]
           : null]"
           @mousedown="moveStart($event, 1)"
           @touchstart="moveStart($event, 1)"
@@ -66,16 +66,16 @@
           ref="dot"
           key="dot"
           :class="[
-            tooltipStatus, 
-            'vue-slider-dot', 
-            { 
-              'vue-slider-dot-focus': focusFlag && focusSlider === 0, 
+            tooltipStatus,
+            'vue-slider-dot',
+            {
+              'vue-slider-dot-focus': focusFlag && focusSlider === 0,
               'vue-slider-dot-dragging': flag && currentSlider === 0
             }
           ]"
           :style="[
-            dotStyles, 
-            sliderStyles, 
+            dotStyles,
+            sliderStyles,
             focusFlag && focusSlider === 0 ? focusStyles : null
           ]"
           @mousedown="moveStart"
@@ -123,16 +123,16 @@
           </slot>
         </li>
       </ul>
-      <div 
+      <div
         ref="process"
-        :class="['vue-slider-process', { 'vue-slider-process-dragable': isRange && processDragable }]" 
+        :class="['vue-slider-process', { 'vue-slider-process-dragable': isRange && processDragable }]"
         :style="processStyle"
         @click="processClick"
         @mousedown="moveStart($event, 0, true)"
         @touchstart="moveStart($event, 0, true)"
       >
       <div ref="mergedTooltip" class="vue-merged-tooltip" :class="['vue-slider-tooltip-' + tooltipDirection[0], 'vue-slider-tooltip-wrap']" :style="tooltipMergedPosition">
-          <slot name="tooltip">
+          <slot name="tooltip" :range="value">
             <span class="vue-slider-tooltip" :style="tooltipStyles">
               {{ mergeFormatter ? mergeFormatting(val[0], val[1]) : (formatter ? (val[0] === val[1] ? formatting(val[0]) : `${formatting(val[0])} - ${formatting(val[1])}`) : (val[0] === val[1] ? val[0] : `${val[0]} - ${val[1]}`)) }}
             </span>
@@ -997,12 +997,14 @@
         if (this.isRange && isDirectionSame) {
           const tooltip0 = this.reverse ? this.$refs.tooltip1 : this.$refs.tooltip0
           const tooltip1 = this.reverse ? this.$refs.tooltip0 : this.$refs.tooltip1
+          const tooltip0Rect = tooltip0.getBoundingClientRect()
+          const tooltip1Rect = tooltip1.getBoundingClientRect()
 
-          const tooltip0Right = tooltip0.getBoundingClientRect().right
-          const tooltip1Left = tooltip1.getBoundingClientRect().left
+          const tooltip0Right = tooltip0Rect.right
+          const tooltip1Left = tooltip1Rect.left
 
-          const tooltip0Y = tooltip0.getBoundingClientRect().y
-          const tooltip1Y = tooltip1.getBoundingClientRect().y + tooltip1.getBoundingClientRect().height
+          const tooltip0Y = tooltip0Rect.top
+          const tooltip1Y = tooltip1Rect.top + tooltip1Rect.height
 
           const horizontalOverlap = this.direction === 'horizontal' && tooltip0Right > tooltip1Left
           const verticalOverlap = this.direction === 'vertical' && tooltip1Y > tooltip0Y
@@ -1043,8 +1045,10 @@
           this.setValue(this.limitValue(this.value), true, this.startAnimation ? this.speed : 0)
           this.bindEvents()
 
-          if (this.isRange && this.tooltipMerge) {
-            this.handleOverlapTooltip()
+          if (this.isRange && this.tooltipMerge && !this.startAnimation) {
+            this.$nextTick(() => {
+              this.handleOverlapTooltip()
+            })
           }
         }
       })

diff --git a/src/vue2-slider.vue b/src/vue2-slider.vue
@@ -1,8 +1,8 @@
 <template>
-  <div 
-    ref="wrap" 
-    :class="['vue-slider-component', flowDirection, disabledClass, stateClass, { 'vue-slider-has-label': piecewiseLabel }]" 
-    v-show="show" 
+  <div
+    ref="wrap"
+    :class="['vue-slider-component', flowDirection, disabledClass, stateClass, { 'vue-slider-has-label': piecewiseLabel }]"
+    v-show="show"
     :style="[wrapStyles, boolDisabled ? disabledStyle : null]"
     @click="wrapClick"
   >
@@ -12,18 +12,18 @@
           ref="dot0"
           key="dot0"
           :class="[
-            tooltipStatus, 
-            'vue-slider-dot', 
-            { 
-              'vue-slider-dot-focus': focusFlag && focusSlider === 0, 
+            tooltipStatus,
+            'vue-slider-dot',
+            {
+              'vue-slider-dot-focus': focusFlag && focusSlider === 0,
               'vue-slider-dot-dragging': flag && currentSlider === 0,
               'vue-slider-dot-disabled': !boolDisabled && disabledArray[0]
             }
           ]"
           :style="[
             dotStyles,
             (!boolDisabled && disabledArray[0]) ? disabledDotStyles[0] : null,
-            sliderStyles[0], focusFlag && focusSlider === 0 ? focusStyles[0] 
+            sliderStyles[0], focusFlag && focusSlider === 0 ? focusStyles[0]
           : null]"
           @mousedown="moveStart($event, 0)"
           @touchstart="moveStart($event, 0)"
@@ -38,18 +38,18 @@
           ref="dot1"
           key="dot1"
           :class="[
-            tooltipStatus, 
-            'vue-slider-dot', 
-            { 
-              'vue-slider-dot-focus': focusFlag && focusSlider === 1, 
+            tooltipStatus,
+            'vue-slider-dot',
+            {
+              'vue-slider-dot-focus': focusFlag && focusSlider === 1,
               'vue-slider-dot-dragging': flag && currentSlider === 1,
               'vue-slider-dot-disabled': !boolDisabled && disabledArray[1]
             }
           ]"
           :style="[
             dotStyles,
             (!boolDisabled && disabledArray[1]) ? disabledDotStyles[1] : null,
-            sliderStyles[1], focusFlag && focusSlider === 1 ? focusStyles[1] 
+            sliderStyles[1], focusFlag && focusSlider === 1 ? focusStyles[1]
           : null]"
           @mousedown="moveStart($event, 1)"
           @touchstart="moveStart($event, 1)"
@@ -66,16 +66,16 @@
           ref="dot"
           key="dot"
           :class="[
-            tooltipStatus, 
-            'vue-slider-dot', 
-            { 
-              'vue-slider-dot-focus': focusFlag && focusSlider === 0, 
+            tooltipStatus,
+            'vue-slider-dot',
+            {
+              'vue-slider-dot-focus': focusFlag && focusSlider === 0,
               'vue-slider-dot-dragging': flag && currentSlider === 0
             }
           ]"
           :style="[
-            dotStyles, 
-            sliderStyles, 
+            dotStyles,
+            sliderStyles,
             focusFlag && focusSlider === 0 ? focusStyles : null
           ]"
           @mousedown="moveStart"
@@ -123,9 +123,9 @@
           </slot>
         </li>
       </ul>
-      <div 
+      <div
         ref="process"
-        :class="['vue-slider-process', { 'vue-slider-process-dragable': isRange && processDragable }]" 
+        :class="['vue-slider-process', { 'vue-slider-process-dragable': isRange && processDragable }]"
         :style="processStyle"
         @click="processClick"
         @mousedown="moveStart($event, 0, true)"
@@ -997,12 +997,14 @@
         if (this.isRange && isDirectionSame) {
           const tooltip0 = this.reverse ? this.$refs.tooltip1 : this.$refs.tooltip0
           const tooltip1 = this.reverse ? this.$refs.tooltip0 : this.$refs.tooltip1
+          const tooltip0Rect = tooltip0.getBoundingClientRect()
+          const tooltip1Rect = tooltip1.getBoundingClientRect()
 
-          const tooltip0Right = tooltip0.getBoundingClientRect().right
-          const tooltip1Left = tooltip1.getBoundingClientRect().left
+          const tooltip0Right = tooltip0Rect.right
+          const tooltip1Left = tooltip1Rect.left
 
-          const tooltip0Y = tooltip0.getBoundingClientRect().y
-          const tooltip1Y = tooltip1.getBoundingClientRect().y + tooltip1.getBoundingClientRect().height
+          const tooltip0Y = tooltip0Rect.top
+          const tooltip1Y = tooltip1Rect.top + tooltip1Rect.height
 
           const horizontalOverlap = this.direction === 'horizontal' && tooltip0Right > tooltip1Left
           const verticalOverlap = this.direction === 'vertical' && tooltip1Y > tooltip0Y
@@ -1043,8 +1045,10 @@
           this.setValue(this.limitValue(this.value), true, this.startAnimation ? this.speed : 0)
           this.bindEvents()
 
-          if (this.isRange && this.tooltipMerge) {
-            this.handleOverlapTooltip()
+          if (this.isRange && this.tooltipMerge && !this.startAnimation) {
+            this.$nextTick(() => {
+              this.handleOverlapTooltip()
+            })
           }
         }
       })