在当前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,不建议用窗口定位