亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2022年02月14日 11:30:26   作者：tutou_girl  
這篇文章主要介紹了vue中實現(xiàn)組件跟隨鼠標位置彈出效果,本文通過圖文示例代碼相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

子組件通過動態(tài)綁定style改變div坐標。

在這里插入圖片描述

注意！??！

在這里插入圖片描述

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

在這里插入圖片描述

加上watch監(jiān)聽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'
   }
 }
}

對了，在組件上添加鼠標移出事件就可以實現(xiàn)鼠標移出卡片關閉。

在這里插入圖片描述

leaveCenter(){
  this.showCenter=false;
}

到此這篇關于vue中實現(xiàn)組件跟隨鼠標位置彈出效果的文章就介紹到這了,更多相關vue組件跟隨鼠標位置彈出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論