一般情况对于鼠标移入出现悬浮框,会考虑到是在页面顶部还是底部,所以会涉及到一些代码
<div v-show="i.secStationList&&(i.secStationList.length > 0)" class="more" onmouseenter="onMouseHover(event, 'siteName', 1)" onmouseleave="onMouseHover(event, 'siteName', 2)">
<em>【更多】</em>
<div class="dropDown scroll">
<div class="scroll detailList">
<p v-for="(item,index) in i.secStationList" :key="index" :title="item">{{item}}</p>
</div>
</div>
</div>
.siteNames .dropDown {
position: absolute;
top: 35px;
left: 0;
background-color: #fff;
z-index: 123456;
box-shadow: 0 0 15px #aaa;
width: 100%;
/*display: block;*/
display: none;
cursor: inherit;
line-height: 30px;
max-height: 150px;
/* height: 150px; */
overflow: hidden;
}
.siteNames .dropDown .detailList {
width: 100%;
/* height: 150px; */
max-height: 150px;
overflow: hidden;
}
function onMouseHover(e, i, c) {
var _this = $(e.currentTarget);
var height = $('#app').height();
//var thisWidth = _this.width();
//var x = e.clientX,
y = e.clientY;
if (i == 'siteName') {
if (c == 1) {//鼠标移入
var len = _this.find('.dropDown p').length;
console.log(height)
console.log(y+(len*30))
//30px为悬浮框中各行的行高,40为页面app的padding值
if (y + (len * 30) > height - 40) {
len = len > 5 ? 5 : len;
_this.find('.dropDown').css('top', -len * 30 + 'px').stop().fadeIn(300);
} else {
//35px为鼠标移入行的行高
_this.find('.dropDown').css('top', '35px').stop().fadeIn(300);
}
_this.parents('li').css('overflow', 'initial');
if (len > 5) {
initNiceScroll();
setNiceScroll();
}
} else {//鼠标移出
$(e.currentTarget).find('.dropDown').fadeOut(300)
}
}
}