vue.js如何实现二级下拉悬浮菜单

小编给大家分享一下vue.js如何实现二级下拉悬浮菜单，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

vue.js实现二级下拉悬浮菜单的方法：1、完成鼠标悬浮出现新的div的效果；2、实现鼠标经过个人头像到个人信息的div时个人信息的div不消失；3、添加中间变量，在cl_person_info()方法中利用这个变量进行判断即可。

本文操作环境：windows10系统、vue 2.5.2、thinkpad t480电脑。

在实际的开发项目中我们可能需要实现类似二级菜单的功能，如果我们想偷个懒，那么我们可以直接使用现有的Element UI框架。但是这种方法有个很大的缺点，我们只有明白了各个代码的意思才能够修改代码以完成想要的动态效果，所以我们不推荐使用这种方法。

可能有的小伙伴就会说了不是还有jQuery么？没错jQuery也可以实现，但是使用jQuery实现的话一定需要直接对DOM进行操作，代码比较复杂。

那么我们到底该使用哪种方式呢？为什么不去使用v-bind呢？说干就干，一起来看看吧！

首先完成鼠标悬浮出现新的div的效果

html部分代码如下：

<template>
<div class="person_img" >
    <img id="person_img" :src="img_url"  @mouseover="person_info()" @mouseout="cl_person_info()"/>
 </div>

<div v-show="person_con" class="hidden_div" >
     <div>{{userid}}</div>
     <div>个人设置</div>
     <div>账户中心</div>
     <div>退出登录</div>
</div>
</template>

//@mouseover、@mouseout和 v-show="person_con" 用来控制悬浮出现和消失的效果

js部分代码如下所示：

<script>
name:'',
    data(){
        return{
            placeholder:'搜索课程',
            token:'',//判断是否登录的参数，在加载主页时直接判断
            person_con:false,
            userid:'',
        }
    },
     methods:{
     person_info(){
        this.person_con = true;
    },
    		
     cl_person_info(){ 
        this.person_con = false;
    },
    
    }
</script>

很简单，这样就实现了鼠标经过个人头像（person_img）时，下面会出现个人信息person_con。

下面是关键，怎么实现鼠标经过个人头像到个人信息的div时个人信息的div不消失，继而进行更多的业务操作呢？

自然的想法就是给再给person_con加上@mouseover和@mouseout。

接着实现鼠标经过个人头像到个人信息的div时个人信息的div不消失

html部分代码如下：

<template>
<div class="person_img" >
    <img id="person_img" :src="img_url"  @mouseover="person_info()" @mouseout="cl_person_info()"/>
 </div>
 
//新增@mouseover和@mouseout
<div v-show="person_con" class="hidden_div" @mouseover="person_infoContinue()" @mouseout="cl_person_infoContinue()" >
     <div>{{userid}}</div>
     <div>个人设置</div>
     <div>账户中心</div>
     <div>退出登录</div>
</div>
</template>

js部分代码如下：

<script>
name:'',
    data(){
        return{
            placeholder:'搜索课程',
            token:'',//判断是否登录的参数，在加载主页时直接判断
            person_con:false,
            userid:'',
        }
    },
     methods:{
     person_info(){
        this.person_con = true;
    },
    		
     cl_person_info(){ 
        this.person_con = false;
    },
    
    person_infoContinue(){
        this.person_con = true;
    },
    
    cl_person_infoContinue(){
        this.person_con = false;
    },
    }
</script>

到此，还不能实现完整的功能，因为现在代码还不完善。为啥？因为在鼠标移出个人头像时，person_con又变为false了，这就导致person_infoContinue()和 cl_person_infoContinue()其实是不起效果的。那又该怎么办呢？自然的想法就是再添加一个中间变量，在cl_person_info()方法中，我利用这个变量进行判断。

js部分代码如下：

<script>
name:'',
    data(){
        return{
            placeholder:'搜索课程',
            token:'',//判断是否登录的参数，在加载主页时直接判断
            person_con:false,
            isperson_infoContinue:false,//增加
            userid:'',
        }
    },
     methods:{
     //不变
     person_info(){
        this.person_con = true;
    },
    //增加判断
     cl_person_info(){ 
         if(this.isperson_infoContinue = true){
                this.person_con = true;
            }else{
                this.person_con = false;
            }
    },
    //鼠标进入到新的div时让中间变量为true
    person_infoContinue(){
        this.person_con = true;
        this.isperson_infoContinue = true;
    },
    
    cl_person_infoContinue(){
    	this.isperson_infoContinue = false;
        this.person_con = false;
    },
    }
</script>

到此，就利用简单的逻辑判断true和false完成了悬浮二级菜单的功能。

看完了这篇文章，相信你对“vue.js如何实现二级下拉悬浮菜单”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！