vue实现鼠标移动到用户头像出现弹窗选卡

最新推荐文章于 2024-06-18 17:26:08 发布

望屿

最新推荐文章于 2024-06-18 17:26:08 发布

阅读量3.3k

点赞数 2

文章标签： vue.js javascript css

本文链接：https://blog.youkuaiyun.com/darabiuz/article/details/122707536

版权

本文介绍如何使用Vue.js实现鼠标移到用户头像时弹出包含个人信息和退出选项的选卡，移开鼠标后3秒自动隐藏。通过HTML、CSS和JavaScript实现这一交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.效果

鼠标移动至头像位置，弹出选项卡，个人信息和退出均可点击
鼠标移出界面3s后隐藏选项卡

2.源码：

html部分
需要一个父元素box1包裹住图片和选项卡
内部一张图片，一个box2用于显示选项卡，并用v-show=‘userInfo’用来控制选项卡的显示和隐藏

<div class="box1">
                    <img src="" alt="" class="userMessage" @mouseover="showInfo" @mouseleave="hideInfo">
                    <div v-show="userInfo" class="box2">
                            <p @click="personMessage">个人信息</p>
                            <p @click="quit">退出</p>
                    </div> 
                </div>

css部分

 .box1{
 //设置父元素box1为相对定位，方便后续的box2通过子绝父相来定位
                    position: relative;
                    width: 22px;
                    height: 22px;
                    margin-right: 20px;
                    .userMessage{
                        width: 100%;
                        height: 100%;
                        &:hover{
                            cursor: pointer;
                        }
                    }
                    .box2{
                        position: absolute;
                        bottom: -38px;
                        left: -50%;
                        border: 1px solid #ccc;
                        width: 50px;
                        height: 35px;
                        background-color: #fff;
                        box-sizing: border-box;
                        p{
                            margin-top: 3px;
                            text-align: center;
                            font-size: 8px;
                            &:hover{
                                cursor: pointer;
                            }
                        }
                    }
                }

js部分

data里的useInfo作为v-show控制显示隐藏的参数，默认为false，默认隐藏

//当触发mouseleave时调用的方法
 hideInfo(){
            setTimeout(()=>{
                this.userInfo=false
            },3000)
        },
//当触发mouseover时调用的方法       
        showInfo(){
            this.userInfo=true
        },