vue.js怎么实现二级下拉悬浮菜单-Vue.js-PHP中文网

vue.js怎么实现二级下拉悬浮菜单

王林

发布： 2021-10-08 14:12:24

原创

5799人浏览过

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

vue.js怎么实现二级下拉悬浮菜单

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

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

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

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

立即学习“前端免费学习笔记（深入）”；

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

html部分代码如下：

<template>
<div class="person_img" >
    @@##@@
 </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" >
    @@##@@
 </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怎么实现二级下拉悬浮菜单的详细内容，更多请关注php中文网其它相关文章！