Vue實現(xiàn)鼠標經(jīng)過文字顯示懸浮框效果的示例代碼

更新時間：2020年10月14日 08:28:37 作者：瀟雷

這篇文章主要介紹了Vue實現(xiàn)鼠標經(jīng)過文字顯示懸浮框效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧

需求

在所做的Vue項目中，需要在鼠標移動文字框的時候顯示一些詳細信息。最終實現(xiàn)的效果如下：

鼠標經(jīng)過button的時候，可以在光標附近顯示出一個懸浮框，顯示框里面顯示時間和值的信息，鼠標移出button元素的時候，這個顯示框會消失。

分析

涉及到鼠標的移動事件。

鼠標事件有下面這幾種：

1、onclick(鼠標點擊事件)

box.onclick = function(e){
  console.log(e)
}

2、onmousedown(鼠標按下事件)

box.onmousedown = function(e){
  console.log(e)
}

3、onmouseup(鼠標松開事件)

box.onmouseup = function(e){
  console.log(e)
}

4、onmousemove(鼠標移動事件)

box.onmousemove = function(e){
  console.log(e)
}

5、onmouseout(鼠標劃出事件)

box.onmouseout = function(e){
  console.log(e)
}

由鼠標的MouseEvent需要了解幾個坐標：

一、clientX、clientY 點擊位置距離當前body可視區(qū)域的x，y坐標

二、pageX、pageY 對于整個頁面來說，包括了被卷去的body部分的長度

三、screenX、screenY 點擊位置距離當前電腦屏幕的x，y坐標

四、offsetX、offsetY 相對于帶有定位的父盒子的x，y坐標

五、x、y 和screenX、screenY一樣

實現(xiàn)

我實現(xiàn)的思路是寫了一個默認的空div，用來展示懸浮框信息。展示的懸浮框是絕對定位，一開始是隱藏的，當觸發(fā)mouseover事件的時候，把display變?yōu)閎lock塊級元素，然后獲取的event事件，

<div id="mouse" v-if="true" class="version_total">
  </div>
  .version_total{
  position: absolute;
  width: 10%;
  height: 5%;
 }

然后真正的div上面寫個mousemove 綁定一個方法傳遞參數(shù)和event事件：在這個方法里面更改樣式，最后用innerHtml來展現(xiàn)出來，需要給懸浮框的div元素設(shè)置top和left屬性，具體的代碼如下：

復(fù)制代碼代碼如下:

<div :class="[yxInfo[28].value==0 ? 'buttons2':'buttonsRed']" v-if="yxInfo[28]!=undefined" @mousemove="detailInfo($event,yxInfo[28])" @mouseleave="leave($event)" style="top: 37%;left: 63%">{{yxInfo[28].keyName}}</div>

detailInfo(e,data){
    var showDiv = document.getElementById('mouse')
    showDiv.style='background-color:#8c8c8c;border:1px solid black'
    showDiv.style.height='58px'
    showDiv.style.textAlign='left'
    showDiv.style.left = (event.pageX-300) + 'px'
    showDiv.style.top = (event.pageY-120) + 'px'
    showDiv.style.display = 'block'
    let time=data.time;
    let keyValue=data.value;
    var html ="<p>"+"時間:"+time+"</p>";
    var html2 ="<p>"+"值:"+keyValue+"</p>";
    showDiv.innerHTML = html+html2
   },
leave($event){
    var showDiv = document.getElementById('mouse')
    showDiv.style.display = 'none'
    showDiv.innerHTML = ''
}

到此這篇關(guān)于Vue實現(xiàn)鼠標經(jīng)過文字顯示懸浮框效果的示例代碼的文章就介紹到這了,更多相關(guān)Vue 鼠標懸浮框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: