vue中對滑鼠劃過進行處理

滑鼠事件進行監聽

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

翻閱了一些部落格，發現好多都提到了mouse事件，如mouseover、mouseout、mouseenter、mouseleave，在之後我自己也通過這種方法進行了嘗試。

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <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進行相關控制（只是舉例）。

感謝給我提解決辦法的人，繼續努力，加油↖(^ω^)↗