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

目录
  • 前言
  • 图片说明
  • 功能实现
  • 这里需要注意一点
  • mouseover 和 mouseenter 的区别
  • 总结

前言

前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标

鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon

文字不好描述,因为是web端录屏也比较麻烦 这里用截图说明

图片说明

功能实现

之前没做过这种效果,问了一下我的组长-豪哥

他告诉我很简单,利用vue的@mouseenter 和 @mouseleave事件就可以完美解决

本着这个思路,我去寻求答案,找了很多有关知识,自己也慢慢摸索 完成了该效果

下面说下实现 附代码

因为是在列表中完成的某个item的图标隐藏与显示

这个时候我们需要合index绑定 并且和改条目的id绑定(用来互斥)

这里需要注意一点

@mouseenter@mouseleave 方法必须放到父类的div中 才能起效果

我们需要

在js中把id绑定 把index设置值,默认为false 既不显示

下面js代码中做了id绑定和给数组的标记赋值的关系

/**
 *左边图表控制隐藏与显示
 */
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 和 mouseenter 的区别

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

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

hover 事件调用顺序:

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>

总结

到此这篇关于Vue实现鼠标悬浮隐藏与显示图片效果@mouseenter和@mouseleave事件的文章就介绍到这了,更多相关Vue鼠标悬浮隐藏与显示图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue.js鼠标悬浮更换图片功能

    最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 html代码如下 <ul> <li> <a href=""> <img src="../../../img/goods/study.png" alt="学习"> <img class="h

  • vue实现鼠标悬浮框效果

    本文实例为大家分享了vue实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 效果: html: <div   @mouseenter="enter"    @mouseleave="leave"    @mousemove="move" > 鼠标触碰元素 </div>   <div v-show="popUpShow" class="hover_con" :style=&

  • 详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

    最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题.就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象. 重点:事件写到父元素上才行!!! 0.0 下面写下我的实现方法和实现效果 样式代码: <div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="

  • Vue实现鼠标悬浮切换图片src

    本文实例为大家分享了Vue实现鼠标悬浮切换图片src的具体代码,供大家参考,具体内容如下 需求: 1. 鼠标悬浮到图示按钮上面,图片切换成灰色按钮2. 鼠标离开图示按钮,图片切换成回白色按钮 Html部分: <!-- 如果此处的两个鼠标事件不生效,可以在mouseenter后面添加.native后缀 --> <div class="left-btn"      @click="saveTemplate()"      @mouseenter=&qu

  • Vue中Table组件Select的勾选和取消勾选事件详解

    简述 之间设计的界面中使用的是复选框控件,但是经过对官网了一些了解,使我们更加倾向于使用一些官网已经封装好的事件,就比如Table组件的Select勾选和取消勾选的这样一个事件. 勾选 首先我们需要说一下这个需求,如下图: 勾选要实现如下的一个效果:对左侧Table的内容进行勾选,然后勾选行的数据传给右侧的Table中. 实现代码如下: ============1.按照官网封装好的样式去写Table组件======= <template> <div> <Table>&l

  • JavaScript实现定时隐藏与显示图片的方法

    本文实例讲述了JavaScript实现定时隐藏与显示图片的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现定时隐藏与显示图片,设定图片在几秒后会自动显示,也会自动隐藏,秒数这个自己去定义吧,在JavaScript代码片段内. 运行效果如下图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo

  • 基于Vue实现图片在指定区域内移动的思路详解

    当图片比要显示的区域大时,需要将多余的部分隐藏掉,我们可以通过绝对定位来实现,并通过动态修改图片的left值和top值从而实现图片的移动.具体实现效果如下图,如果我们移动的是div 实现思路相仿. 此处需要注意的是 我们在移动图片时,需要通过draggable="false" 将图片的 <img src="/static/pano-dev/test/image-2.jpg" draggable="false" />,否则按下鼠标监听o

  • JQuery鼠标移到小图显示大图效果的方法

    本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠标提示效果的方法>,稍微修改一下代码,就可以做出一个图片的提示效果. 参考前面的超链接提示效果的代码,只需要将创建的div元素的代码改为: //创建 div 元素 图片提示 var tooltip = "<div id="tooltip"><img src=""+ this.hr

  • JS实现页面载入时随机显示图片效果

    本文实例讲述了JS实现页面载入时随机显示图片效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS 随机图片效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- img { b

  • JQuery实现隐藏和显示动画效果

    本文为大家分享了JQuery实现隐藏和显示动画效果的具体代码,供大家参考,具体内容如下 隐藏和显示 语法 $(selector).fadeIn([speed,callback]); $(selector).fadeOut([speed,callback]); $(selector).fadeToggle([speed,callback]); 参数说明: 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒. 可选的 call

  • Pygame鼠标进行图片的移动与缩放案例详解

    pygame鼠标进行拖拽移动图片.缩放.以及按钮响应 案例 # -*- coding: UTF-8 -*- #!/usr/bin/env python3 # @Time : 2021.12 # @Author : 高二水令 # @Software: 图层拖拽缩放 import os import sys import pygame from pygame.locals import * class Background(pygame.sprite.Sprite): def __init__(se

  • jQuery的图片轮播插件PgwSlideshow使用详解

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides

随机推荐

其他