悬浮框的实现需要鼠标移上和移出两个事件,本例是基于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即可。

Logo

前往低代码交流专区

更多推荐