悬浮框的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ji519974770/article/details/80790017

悬浮框的实现需要鼠标移上和移出两个事件，本例是基于vue做的：

<div @mouseover="overShow(bossJobInfo.postDescription)" @mouseout="outHide" class="ellipsis-specail" style="-webkit-box-orient: vertical;">{{ bossJobInfo.postDescription }}</div>

重点是overShow()和outHide()方法：

    overShow (value) {
        var e = event || window.event
        var showDiv = document.getElementById('showDiv')
        var x = (e.pageX - 200) + 'px'
        var y = (e.pageY - 200) + 'px'
        showDiv.style.left = x
        showDiv.style.top = y
        showDiv.style.border = '1px solid #F90'
        showDiv.style.background = '#E3EDCD'
        showDiv.style.position = 'absolute'
        showDiv.style.width = '40%'
        showDiv.style.zIndex = '9999'
        showDiv.style.display = 'block'
        showDiv.innerHTML = value
    },
    outHide () {
        var showDiv = document.getElementById('showDiv')
        showDiv.style.display = 'none'
        showDiv.innerHTML = ''
    }

主要是overShow()方法，根据鼠标位置，定义悬浮框的位置，以及使用js动态加载css样式；因为我的悬浮框中要能使用html样式，所以使用的innerHTML方法，这样value中的html标签能正常展示，如果只需展示内容，使用innerContent即可。