Vue实现鼠标悬浮隐藏与显示图片效果@mouseenter和@mouseleave事件详解

/**
 *左边图表控制隐藏与显示
 */
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')
}

<div v-for="(item, index) in symptomList" class="item">
            <div class="left">
            	 <!--  @mouseenter="mouseenter(index,item)" 
            	 在这里绑定index和item数据类(这里有我们要的数据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>

 <div
     <!-- 1、进入元素 事件会叠加 -->
    @mouseover="mouseover"
     <!-- 2、进入元素 事件不叠加 -->
    @mouseenter="mouseenter"
     <!-- 3、移动 -->
    @mousemove="mousemove"
     <!-- 4、离开元素 事件会叠加-->
    @mouseout="mouseout"
     <!-- 5、离开元素 事件不叠加 -->
    @mouseleave="mouseleave"
     <!-- 6、鼠标在元素上 按下 -->
    @mousedown="mousedown"
    <!-- 7、鼠标在元素上 抬起 -->
    @mouseup="mouseup"
  >
  </div>