fixed #2852

examples/routers/slider.vue

@@ -1,40 +1,68 @@
-<template>
+<!--<template>-->
-    <div style="margin: 0 400px;">
+    <!--<div style="margin: 0 400px;">-->
-        <Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>
+        <!--<Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>-->
-        <Button @click="randomSingle">change</Button> {{singleDisplayValue}}
+        <!--<Button @click="randomSingle">change</Button> {{singleDisplayValue}}-->
 
-        <Slider v-model="valueRange" range @on-change="updateRangeDisplayValue"></Slider>
+        <!--<Slider v-model="valueRange" range @on-change="updateRangeDisplayValue"></Slider>-->
-        <Button @click="randomRange">change</Button> {{rangeDisplayValue}}
+        <!--<Button @click="randomRange">change</Button> {{rangeDisplayValue}}-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--valueSingle: 10,-->
+                <!--valueRange: [20, 50],-->
+                <!--singleDisplayValue: 10,-->
+                <!--rangeDisplayValue: [20, 50]-->
+            <!--};-->
+        <!--},-->
+        <!--methods: {-->
+            <!--updateSingleDisplayValue (val){-->
+                <!--console.log('updateSingleDisplayValue', val);-->
+                <!--this.singleDisplayValue = val;-->
+            <!--},-->
+            <!--updateRangeDisplayValue (val){-->
+                <!--console.log('updateRangeDisplayValue', val);-->
+                <!--this.rangeDisplayValue = val.join(' - ');-->
+            <!--},-->
+            <!--randomSingle () {-->
+                <!--this.valueSingle = this.random(0, 100);-->
+            <!--},-->
+            <!--randomRange () {-->
+                <!--this.valueRange = [this.random(0, 50), this.random(50, 100)];-->
+            <!--},-->
+            <!--random (min, max){-->
+                <!--return Math.round(Math.random() * (max - min)) + min;-->
+            <!--}-->
+        <!--}-->
+    <!--};-->
+<!--</script>-->
+
+
+<template>
+    <div>
+        <Button type="primary" @click="modal1 = true">Display dialog box</Button>
+        <Modal v-model="modal1">
+            <Slider v-model="value2" range show-tip="always"></Slider>
+        </Modal>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                valueSingle: 10,
+                modal1: false,
-                valueRange: [20, 50],
+                value2: [20, 50],
-                singleDisplayValue: 10,
+            }
-                rangeDisplayValue: [20, 50]
-            };
         },
         methods: {
-            updateSingleDisplayValue (val){
+            ok () {
-                console.log('updateSingleDisplayValue', val);
+                this.$Message.info('Clicked ok');
-                this.singleDisplayValue = val;
             },
-            updateRangeDisplayValue (val){
+            cancel () {
-                console.log('updateRangeDisplayValue', val);
+                this.$Message.info('Clicked cancel');
-                this.rangeDisplayValue = val.join(' - ');
+            }
-            },
-            randomSingle () {
-                this.valueSingle = this.random(0, 100);
-            },
-            randomRange () {
-                this.valueRange = [this.random(0, 50), this.random(50, 100)];
-            },
-            random (min, max){
-                return Math.round(Math.random() * (max - min)) + min;
         }
     }
-    };
 </script>

src/components/modal/modal.vue

@@ -229,6 +229,7 @@
                     }
                 }
                 this.broadcast('Table', 'on-visible-change', val);
+                this.broadcast('Slider', 'on-visible-change', val);  // #2852
                 this.$emit('on-visible-change', val);
             },
             loading (val) {

src/components/slider/slider.vue

@@ -272,8 +272,7 @@
                 }
             },
 
-
+            sliderClick (event) {
-            sliderClick: function (event) {
                 if (this.disabled) return;
                 const currentX = this.getPointerX(event);
                 const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
@@ -290,6 +289,23 @@
                 this.$emit('on-change', exportValue);
                 this.dispatch('FormItem', 'on-form-change', exportValue);
             },
+        },
+        mounted () {
+            // #2852
+            this.$on('on-visible-change', (val) => {
+                if (val && this.showTip === 'always') {
+                    this.$refs.minTooltip.doDestroy();
+                    if (this.range) {
+                        this.$refs.maxTooltip.doDestroy();
+                    }
+                    this.$nextTick(() => {
+                        this.$refs.minTooltip.updatePopper();
+                        if (this.range) {
+                            this.$refs.maxTooltip.updatePopper();
+                        }
+                    });
+                }
+            });
         }
     };
 </script>