vue實現組件跟隨鼠標位置彈出效果(示例代碼)

Posted on by

在這裡插入圖片描述

實現鼠標放置在“我的”上時出現卡片，卡片位置跟隨鼠標。當鼠標移除卡片時卡片隱藏。
當鼠標移入時獲取鼠標坐標，並把父組件的鼠標位置通過prop傳給子組件。

在這裡插入圖片描述

toCenter(event){
  const{x,y}=event
  this.mouse_x=x;
  this.mouse_y=y;
  this.showCenter=true;
},

在這裡插入圖片描述

子組件通過動態綁定style改變div坐標。

在這裡插入圖片描述

註意！！！

在這裡插入圖片描述

一開始沒用watch，而是在data裡直接修改，如上所示。
這樣會出現刷新以後data獲取不到prop中的屬性值。如下圖

在這裡插入圖片描述

加上watch監聽prop中x，y變化，這樣可以解決。最終版本如下：

 data(){
   return {
     content:['上傳頭像','修改資料','退出賬號','在線反饋'],
     sty:{
       top:'',
       left:''
     }
   }
  },
 watch:{
   x:function(val){
     this.sty.left=(val+10)+'px'
   },
   y:function(val){
     this.sty.top=(val+30)+'px'
   }
 }
}

對瞭，在組件上添加鼠標移出事件就可以實現鼠標移出卡片關閉。

在這裡插入圖片描述

leaveCenter(){
  this.showCenter=false;
}

到此這篇關於vue中實現組件跟隨鼠標位置彈出效果的文章就介紹到這瞭,更多相關vue組件跟隨鼠標位置彈出內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：