From 169c352436e86523cdd411d82958fefffc22739b Mon Sep 17 00:00:00 2001
From: serializedowen <wjh199455@gmail.com>
Date: Wed, 23 Dec 2020 16:59:05 +0800
Subject: [PATCH] fixed #1029 #1046 (#1066)

* docs(tooltip): fixed a typo in comment

* fix(slider): fixed a slider button bug (#1029) (#1046)

fixed an issue where slider button still moves upon mouseleave on tooltip
---
 packages/slider/src/button.vue | 14 +++++++-------
 packages/tooltip/src/index.ts  |  6 ++++++
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/slider/src/button.vue b/packages/slider/src/button.vue
index 67b9db0f78..876f6c437e 100644
--- a/packages/slider/src/button.vue
+++ b/packages/slider/src/button.vue
@@ -2,7 +2,7 @@
   <div
     ref="button"
     class="el-slider__button-wrapper"
-    :class="{ 'hover': hovering, 'dragging': dragging }"
+    :class="{ hover: hovering, dragging: dragging }"
     :style="wrapperStyle"
     tabindex="0"
     @mouseenter="handleMouseEnter"
@@ -20,6 +20,7 @@
       ref="tooltip"
       v-model="tooltipVisible"
       placement="top"
+      :stop-popper-mouse-event="false"
       :popper-class="tooltipClass"
       :disabled="!showTooltip"
       manual
@@ -27,7 +28,10 @@
       <template #content>
         <span>{{ formatValue }}</span>
       </template>
-      <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
+      <div
+        class="el-slider__button"
+        :class="{ hover: hovering, dragging: dragging }"
+      ></div>
     </el-tooltip>
   </div>
 </template>
@@ -63,7 +67,6 @@ export default defineComponent({
   emits: [UPDATE_MODEL_EVENT],
 
   setup(props, { emit }) {
-
     const initData = reactive({
       hovering: false,
       dragging: false,
@@ -91,10 +94,7 @@ export default defineComponent({
       setPosition,
     } = useSliderButton(props, initData, emit)
 
-    const {
-      hovering,
-      dragging,
-    } = toRefs(initData)
+    const { hovering, dragging } = toRefs(initData)
 
     return {
       tooltip,
diff --git a/packages/tooltip/src/index.ts b/packages/tooltip/src/index.ts
index 8654d8a4d9..a577005caa 100644
--- a/packages/tooltip/src/index.ts
+++ b/packages/tooltip/src/index.ts
@@ -92,6 +92,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    stopPopperMouseEvent: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: [UPDATE_MODEL_EVENT],
   setup(props, ctx) {
@@ -134,6 +138,7 @@ export default defineComponent({
       transition,
       trigger,
       visibleArrow,
+      stopPopperMouseEvent,
     } = this
     const popper = h(
       ElPopper,
@@ -150,6 +155,7 @@ export default defineComponent({
         placement,
         showAfter: openDelay || showAfter, // this is for mapping API due to we decided to rename the current openDelay API to showAfter for better readability,
         showArrow: visibleArrow,
+        stopPopperMouseEvent,
         transition,
         trigger,
         popperOptions, // Breakings!: Once popperOptions is provided, the whole popper is under user's control, ElPopper nolonger generates the default options for popper, this is by design if the user wants the full control on @PopperJS, read the doc @https://popper.js.org/docs/v2/