Vue implements mouse hovering, hiding and displaying picture effects @mouseenter and @mouseleave events

foreword

The front-end Vue has a function that moves the mouse to the specified item to display an edit and delete icon.
When the mouse hovers over the list, it needs to have a floating list. The edit and delete icon
text is not easy to describe, because it is more troublesome to record the screen on the web Here are screenshots

illustrate

function realization

I haven’t done this kind of effect before, so I asked my team leader, Brother Hao, and
he told me that it’s very simple, using vue’s @mouseenter and @mouseleave events can perfectly solve it.
In line with this idea, I went to seek the answer and found a lot Regarding the knowledge, I also slowly explored to complete the effect

Let's talk about the implementation of the attached code

Because the icon of an item is hidden and displayed in the list.
At this time, we need to bind the index and the id of the changed item (for mutual exclusion)

One thing to note here

@mouseenterAnd @mouseleave the method must be placed in the div of the parent class to be effective

We need to
bind the id in js and set the index to a value, the default is false and neither will be
displayed

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

We html中把@mouseenter 和 @mouseleaveadd the event
and then make the judgment of hiding and displaying in the specified div tag or according to the id and the currently clicked mark

<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>

The difference between mouseover and mouseenter

mouseover：当鼠标移入元素或其子元素都会触发事件，有一个重复触发，事件叠加过程。对应的移除事件是 mouseout

mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，事件不会叠加。对应的移除事件是 mouseleave

hover event call sequence:

mouseover -> mouseenter -> mousemove(hover进去之后移动会触发) -> mouseout -> mouseleave

Use div to demonstrate all event methods

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

Summarize

The road of learning never stops,
record the present, and maintain an upward attitude~!