序文
フロントエンドの Vue には、指定したアイテムにマウスを移動して編集および削除アイコンを表示する機能があります.
マウスがリストの上に置かれると、フローティング リストが必要です. 編集および削除アイコンのテキストは簡単には表示されません
. Web上で画面を記録する方が面倒なので、説明してください スクリーンショットはこちら
例証する
機能実現
この種のエフェクトはこれまでやったことがなかったので、チーム リーダーの Hao 兄弟に尋ねたところ、
vue の @mouseenter および @mouseleave イベントを使用することで非常に簡単に解決できるとのことでした
。答えを探しに行き、たくさん見つけました知識に関しては、私もゆっくりと探索して効果を完成させました
添付コードの実装について話しましょう
アイテムのアイコンが非表示になり、リストに表示されるため、
このとき、変更されたアイテムのインデックスと id をバインドする必要があります (相互排除のため)。
ここで注意すべきことが 1 つあります
@mouseenter@mouseleaveメソッドを有効にするには、親クラスの div に配置する必要があります
js で ID をバインドし、インデックスを値に設定する必要があります
。デフォルトは false で、どちらも表示されません
。
/**
*左边图表控制隐藏与显示
*/
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 タグで非表示または表示するか、id と現在クリックされているマークで表示または非表示を判断します
<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>
マウスオーバーとマウスエンターの違い
mouseover：当鼠标移入元素或其子元素都会触发事件，有一个重复触发，事件叠加过程。对应的移除事件是 mouseout
mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，事件不会叠加。对应的移除事件是 mouseleave
ホバーイベント呼び出しシーケンス:
mouseover -> mouseenter -> mousemove(hover进去之后移动会触发) -> 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>
要約する
学びの道は止まらず、
今を記録し、上を目指して～！