How to implement a secondary drop-down floating menu in vue.js

Vue.js method to implement a secondary drop-down floating menu: 1. Complete the effect of a new div appearing when the mouse is hovered; 2. Realize that the personal information div does not disappear when the mouse passes the personal avatar to the personal information div; 3. Add an intermediate variable and use this variable to make judgments in the cl_person_info() method.

The operating environment of this article: windows10 system, vue 2.5.2, thinkpad t480 computer.

In actual development projects, we may need to implement functions similar to secondary menus. If we want to be lazy, then we can directly use the existing Element UI framework. However, this method has a big shortcoming. Only by understanding the meaning of each code can we modify the code to achieve the desired dynamic effect, so we do not recommend this method.

Some friends may ask, isn’t there jQuery? Yes, jQuery can also be implemented, but if you use jQuery to implement it, you must directly operate the DOM, and the code is more complicated.

So which method should we use? Why not use v-bind? Just do it, let’s take a look!

First complete the effect of a new div appearing when the mouse is hovering

Part of the html code is as follows:

<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" 用来控制悬浮出现和消失的效果

Part of the js code is as follows:

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

It's very simple. In this way, when the mouse passes over the personal avatar (person_img), the personal information person_con will appear below.

The following is the key. How to prevent the personal information div from disappearing when the mouse passes over the personal avatar to the personal information div, so that more business operations can be performed?

The natural idea is to add @mouseover and @mouseout to person_con.

Then realize that the div of personal information does not disappear when the mouse passes the personal avatar to the div of personal information

Part of the html code is as follows:

<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>

Part of the js code is as follows:

<script>
name:&#39;&#39;,
    data(){
        return{
            placeholder:&#39;搜索课程&#39;,
            token:&#39;&#39;,//判断是否登录的参数，在加载主页时直接判断
            person_con:false,
            userid:&#39;&#39;,
        }
    },
     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>

At this point, the complete function cannot be realized because the code is not perfect yet. Why? Because when the mouse moves out of the personal avatar, person_con becomes false again, which causes person_infoContinue() and cl_person_infoContinue() to have no effect. So what should we do? The natural idea is to add another intermediate variable. In the cl_person_info() method, I use this variable to make judgments.

Part of the js code is as follows:

<script>
name:&#39;&#39;,
    data(){
        return{
            placeholder:&#39;搜索课程&#39;,
            token:&#39;&#39;,//判断是否登录的参数，在加载主页时直接判断
            person_con:false,
            isperson_infoContinue:false,//增加
            userid:&#39;&#39;,
        }
    },
     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>

At this point, the function of floating the secondary menu is completed by using simple logic to determine true and false.

Recommended learning: php training

The above is the detailed content of How to implement a secondary drop-down floating menu in vue.js. For more information, please follow other related articles on the PHP Chinese website!