本篇文章給大家分享的是有關(guān)vue中怎么處理鼠標(biāo)劃過事件，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),淅川企業(yè)網(wǎng)站建設(shè),淅川品牌網(wǎng)站建設(shè),網(wǎng)站定制,淅川網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,淅川網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

鼠標(biāo)事件進(jìn)行監(jiān)聽

需求中，在一個(gè)table（組件）表中，對(duì)于其中一列（該列為圖片列），當(dāng)鼠標(biāo)劃過該列的某個(gè)單元格子（圖片）時(shí)，需要展示出該單元格子對(duì)應(yīng)的遮罩層

翻閱了一些博客，發(fā)現(xiàn)好多都提到了mouse事件，如mouseover、mouseout、mouseenter、mouseleave，在之后我自己也通過這種方法進(jìn)行了嘗試。

 
 


...
changeMask(index) {
 let vm = this;
 let mask = vm.$refs['mask' + index];

 if(mask.style.display == 'none') {
 mask.style.display = 'block';
 }else {
 mask.style.display = 'none';
 }
}

最后在查看結(jié)果中發(fā)現(xiàn)，在劃過的時(shí)候是會(huì)觸發(fā)鼠標(biāo)事件，但是會(huì)出現(xiàn)閃動(dòng)的清空，當(dāng)鼠標(biāo)一直放在該單元格上的時(shí)候，遮罩層也會(huì)消失和出現(xiàn)反復(fù)切換。為緩解這種情況，還對(duì)changeMask中的顯示和隱藏進(jìn)行setTimeout延時(shí)，結(jié)果并不理想，不推薦這樣使用。

CSS方式實(shí)現(xiàn)

這種方法，只需要保留上面代碼中的主體部分，不需要ref和mouse事件這些，主要是通過opacity去控制遮罩層的顯示和隱藏的。具體的樣式代碼如下：

.wrapper {
 position: relative;
 .img-mask {
 position: absolute;
 background: rgba(0, 0, 0, 0.5);
 z-index: 10;
 //設(shè)置left、right、top、bottom的原因是使得遮罩層上的文字顯示在該層的最中間
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 //透明度為0，則就是不可見
 opacity: 0;
 }
 &:hover {
 .img-mask {
  opacity: 1;
 }
 }
}

這種方法達(dá)到了預(yù)期的效果，體驗(yàn)也很好，推薦使用。

table中動(dòng)態(tài)ref

首先，這部分并不是針對(duì)遮罩層顯示隱藏的，而是處理表格中某一列或者很多單元格添加ref的。這個(gè)其實(shí)在第一種方法中就已經(jīng)也出來了，現(xiàn)在做下總結(jié)。

:ref="'mask' + props.rowIndex"這種方法對(duì)例如表格這樣一列中的每個(gè)單元格都對(duì)應(yīng)著一個(gè)附加的東西，而這些東西的位置又是不同的，可以實(shí)現(xiàn)對(duì)每個(gè)單元格進(jìn)行ref綁定，在事件處理函數(shù)中，通過傳遞props.rowIndex得到下標(biāo)，最終通過this.$ref['mask' + props.rowIndex]得到對(duì)應(yīng)的元素，然后對(duì)其css進(jìn)行相關(guān)控制（只是舉例）。

拓展知識(shí)：vue鼠標(biāo)劃過移入移出觸發(fā)函數(shù)介紹

如下所示：

>
 

methods:{
  // 鼠標(biāo)移入加入class
  changeActive($event){
    $event.currentTarget.className="active";
  },
  removeActive($event){
    $event.currentTarget.className="";
  }
}

以上就是vue中怎么處理鼠標(biāo)劃過事件，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前文章：vue中怎么處理鼠標(biāo)劃過事件-創(chuàng)新互聯(lián)
鏈接地址：http://weahome.cn/article/cejshd.html