feat: Improve the slot when the tooltip is merged

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

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -185,7 +185,7 @@ prop*: [only supported in vue2]
 ### Slot
 | Name          | Description  |
 | --------------|--------------|
-| tooltip       | Customize the tooltip slot. optional value: [`value`, `index`, `disabled`(only range model)] |
+| tooltip       | Customize the tooltip slot. optional value: [`value`, `index`, `disabled`(only range model), `merge`(only tooltipMerge is `true`)] |
 | piecewise     | Customize the piecewise slot. optional value: [`label`, `index`, `active`, `first`, `last`] |
 | label         | Customize the label slot. optional value: [`label`, `index`, `active`, `first`, `last`] |
 

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
@@ -131,8 +131,12 @@
         @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" :range="value">
+      <div
+        ref="mergedTooltip"
+        :class="['vue-merged-tooltip', 'vue-slider-tooltip-' + tooltipDirection[0], 'vue-slider-tooltip-wrap']"
+        :style="tooltipMergedPosition"
+      >
+          <slot name="tooltip" :value="val" :merge="true">
             <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>

diff --git a/src/vue2-slider.vue b/src/vue2-slider.vue
@@ -131,8 +131,12 @@
         @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" :range="value">
+      <div
+        ref="mergedTooltip"
+        :class="['vue-merged-tooltip', 'vue-slider-tooltip-' + tooltipDirection[0], 'vue-slider-tooltip-wrap']"
+        :style="tooltipMergedPosition"
+      >
+          <slot name="tooltip" :value="val" :merge="true">
             <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>