vue下如何處理鼠標劃過事件

這篇文章主要介紹“vue下如何處理鼠標劃過事件”，在日常操作中，相信很多人在vue下如何處理鼠標劃過事件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue下如何處理鼠標劃過事件”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

鼠標事件進行監聽

需求中，在一個table（組件）表中，對于其中一列（該列為圖片列），當鼠標劃過該列的某個單元格子（圖片）時，需要展示出該單元格子對應的遮罩層

代碼：

<template>
 <el-table
 :data="tableData"
 stripe
 >
 <el-table-column
  prop="pic"
  label="圖片"
  width="180">
  <template slot-scope="scope">
   <div slot="wrapper" class="name-wrapper">
   <div class="img-mask" @click="toShowDialog(props.row)" :ref="'mask' + props.rowIndex">文字</div>
   <div @mouseover="changeMask(props.rowIndex)" @mouseout="changeMask(props.rowIndex)">
    <img src="...">
   </div>
   </div>
  </template>
 </el-table-column>
 </el-table>
</template>

...
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';
 }
}

最后在查看結果中發現，在劃過的時候是會觸發鼠標事件，但是會出現閃動的清空，當鼠標一直放在該單元格上的時候，遮罩層也會消失和出現反復切換。為緩解這種情況，還對changeMask中的顯示和隱藏進行setTimeout延時，結果并不理想，不推薦這樣使用。

CSS方式實現

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

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

這種方法達到了預期的效果，體驗也很好，推薦使用。

table中動態ref

首先，這部分并不是針對遮罩層顯示隱藏的，而是處理表格中某一列或者很多單元格添加ref的。這個其實在第一種方法中就已經也出來了，現在做下總結。

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

拓展知識：vue鼠標劃過移入移出觸發函數介紹

如下所示：

<ul>>
 <li class="" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"></li>
</ul>

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

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

到此，關于“vue下如何處理鼠標劃過事件”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！