Vue實現(xiàn)鼠標懸浮隱藏與顯示圖片效果@mouseenter和@mouseleave事件詳解

更新時間：2022年11月22日 14:25:16 作者：呂氏春秋i

在所做的Vue項目中,有時候需要在鼠標移動文字框的時候顯示一些詳細信息,下面這篇文章主要給大家介紹了關于Vue實現(xiàn)鼠標懸浮隱藏與顯示圖片效果@mouseenter和@mouseleave事件的相關資料,需要的朋友可以參考下

前言

前端vue 有個功能是鼠標移動到指定item上顯示出來一個編輯和刪除的圖標

鼠標懸停在列表那么需要有懸浮顯示的列表編輯和刪除icon

文字不好描述，因為是web端錄屏也比較麻煩這里用截圖說明

圖片說明

功能實現(xiàn)

之前沒做過這種效果，問了一下我的組長-豪哥

他告訴我很簡單，利用vue的@mouseenter 和 @mouseleave事件就可以完美解決

本著這個思路，我去尋求答案，找了很多有關知識，自己也慢慢摸索完成了該效果

下面說下實現(xiàn) 附代碼

因為是在列表中完成的某個item的圖標隱藏與顯示

這個時候我們需要合index綁定并且和改條目的id綁定(用來互斥)

這里需要注意一點

@mouseenter 和 @mouseleave 方法必須放到父類的div中 才能起效果

我們需要

在js中把id綁定把index設置值，默認為false 既不顯示

下面js代碼中做了id綁定和給數(shù)組的標記賦值的關系

/**
 *左邊圖表控制隱藏與顯示
 */
const leftIcon = reactive({
    inputAry: [] as boolean[]
})
const leftIconId = ref()

const mouseenter = (index: number, item: SymptomList) => {
    leftIcon.inputAry[index] = true
    leftIconId.value = item.id
    console.log('mouseenter')
}

const mouseleave = (index: number, item: SymptomList) => {
    leftIcon.inputAry[index] = false
    leftIconId.value = item.id;
    console.log('mouseleave')
}

我們在html中把@mouseenter 和 @mouseleave事件添加
然后再指定的div標簽內做隱藏與顯示的判斷還是根據(jù)id和當前點擊的標記位

<div v-for="(item, index) in symptomList" class="item">
            <div class="left">
            	 <!--  @mouseenter="mouseenter(index,item)" 
            	 在這里綁定index和item數(shù)據(jù)類(這里有我們要的數(shù)據(jù)id)-->
                <div class="left-div" @mouseenter="mouseenter(index,item)"
                 @mouseleave="mouseleave(index,item)">
                    <div v-if="editShow.inputAry[index] == true && item.id == diseaseId ">
                        <a-input class="input" v-model:value="inputContent" 
                        autofocus="autofocus" :max-length="10"
                            @change="changeInput()" />
                        <a-button class="commit" @click="handleInputCommit(item,index)">
                            <template #icon>
                                <check-outlined style="color: #ffffff" />
                            </template>
                        </a-button>
                        <a-button class="cancel" @click="handleInputCancel(index)">
                            <template #icon>
                                <close-outlined />
                            </template>
                        </a-button>
                    </div>
                    <div v-else style="display: flex;">
                        <div>{{ item.name }}</div>
                        <div class="right-icon" 
                          <!-- 這里是item尾部的2個圖標 編輯和刪除圖標 我們做了2個判斷 
                          第一是==true時，我們才把圖標顯示出來
                          第二：將當前點擊的id記錄 -->
                        v-if="leftIcon.inputAry[index] == true && item.id == leftIconId">
                            <a-button style="color:#676E7C; width: 13.7px ; height: 13.7px;"
                                @click="handleClickEdit(item,index)" type="link">
                                <template #icon>
                                    <edit-outlined />
                                </template>
                            </a-button>

                            <a-button style="margin-left: 5px; 
                            color:#676E7C; width: 13.7px ; height:13.7px;"
                                @click="handleClickDel(item,index)" type="link">
                                <template #icon>
                                    <delete-outlined />
                                </template>
                            </a-button>
                        </div>
                    </div>
                </div>
            </div>

mouseover 和 mouseenter 的區(qū)別

mouseover：當鼠標移入元素或其子元素都會觸發(fā)事件，有一個重復觸發(fā)，事件疊加過程。對應的移除事件是 mouseout

mouseenter:當鼠標移入元素本身（不包含元素的子元素）會觸發(fā)事件，事件不會疊加。對應的移除事件是 mouseleave

hover 事件調用順序:

mouseover -> mouseenter -> mousemove(hover進去之后移動會觸發(fā)) -> mouseout -> mouseleave

用div來演示所有事件方法

 <div
     <!-- 1、進入元素 事件會疊加 -->
    @mouseover="mouseover"
     <!-- 2、進入元素 事件不疊加 -->
    @mouseenter="mouseenter"
     <!-- 3、移動 -->
    @mousemove="mousemove"
     <!-- 4、離開元素 事件會疊加-->
    @mouseout="mouseout"
     <!-- 5、離開元素 事件不疊加 -->
    @mouseleave="mouseleave"
     <!-- 6、鼠標在元素上 按下 -->
    @mousedown="mousedown"
    <!-- 7、鼠標在元素上 抬起 -->
    @mouseup="mouseup"
  >
  </div>