脚本宝典收集整理的这篇文章主要介绍了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:&#39;',
    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完成了悬浮二级菜单的功能。

推荐学习：php培训

以上就是vue.js怎么实现二级下拉悬浮菜单的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的vue.js怎么实现二级下拉悬浮菜单全部内容，希望文章能够帮你解决vue.js怎么实现二级下拉悬浮菜单所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。