Vue 数据双向绑定实现二级下拉悬浮菜单

Vue 数据双向绑定实现二级下拉悬浮菜单

项目中需要做出类似二级菜单的功能，原本是想偷懒直接用现有的Element UI框架，但是发现虽然格式漂亮但是需要看明白各个代码的意思才能修改成自己想要的极其简单的动态效果，果断放弃。
然后想到Jquery，虽然可以实现，但是转念一想肯定会需要直接对DOM进行操作。去百度了一下，果不其然，代码一大堆。我现在不是在用Vue么，双向数据绑定试一试？说做就做！

1.首先完成鼠标悬浮出现新的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。

2.实现鼠标经过个人头像到个人信息的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完成了悬浮二级菜单的功能。