element-ui Ant Design Slider进度条鼠标悬停展示鼠标悬停的当前时间

在当前html 节点做移入获取鼠标在div 的x轴，然后div 的宽度/ max值,结算出每个节点的值，在根据

鼠标的X位置 * 每个节点的值，就是当前div悬停的位置

<template>
    <div>
        <a-slider style="margin-top: 100px;" :tooltip-visible="true"  :autoFocus="autoFocus" :min="min" :max="max" :value="value" id="test" :default-value="value" @change="onChange"/>
        <div style="padding: 20px;background: red;color: #fff;position: fixed;display: inline-block;top: 30px;" 
            v-show="isActive" id="popover" v-html="x">
        </div>
    </div>
</template>

data() {
        return {
            min:0,
            max:100,
            value:1,
            autoFocus:true,
            x:0,
            y:0,
            isActive:false
        }
    },

mounted() {
        var temp = document.getElementsByClassName('ant-slider-step')[0]
        var pop = document.getElementById('popover')
        var _this = this
        temp.onmousemove = function(ev){  
            ev = ev || window.event;           
            var offsetX = ev.offsetX
            var xwidth = _this.max / temp.clientWidth     //每份是多少
            _this.x = offsetX * xwidth
            pop.style.left = `${ev.screenX - pop.clientWidth/2}px`
            //top 固定的 是进度条的上方
            pop.style.top = `${temp.offsetTop + 30}px`
            _this.isActive = true
            console.log(ev.screenX, ev.screenY);  
        }
        temp.onmouseout = function(){  
            _this.isActive = false;  
        }
    },

有条件的可以加个渐入的动画

优先建议用绝对定位，相对于temp，不建议用窗口定位