鼠標事件進行監聽
需求中，在一個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進行相關控制（只是舉例）。
拓展知識：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中對鼠標劃過事件的處理方式詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
