Comment implémenter un menu flottant déroulant secondaire dans vue.js

Méthode Vue.js pour implémenter un menu flottant déroulant secondaire : 1. Compléter l'effet d'un nouveau div apparaissant lorsque la souris est survolée ; 2. Réaliser que le div des informations personnelles ne disparaît pas lorsque la souris passe l'avatar personnel au div des informations personnelles ; 3. Ajoutez une variable centrale, vous pouvez utiliser cette variable pour porter des jugements dans la méthode cl_person_info().

L'environnement d'exploitation de cet article : système windows10, vue 2.5.2, ordinateur thinkpad t480.

Dans les projets de développement réels, nous devrons peut-être implémenter des fonctions similaires aux menus secondaires. Si nous voulons être paresseux, nous pouvons alors utiliser directement le framework Element UI existant. Cependant, cette méthode présente un gros inconvénient. Ce n'est qu'en comprenant la signification de chaque code que nous pouvons modifier le code pour obtenir l'effet dynamique souhaité, nous ne recommandons donc pas cette méthode.

Certains amis peuvent demander : n'existe-t-il pas jQuery ? Oui, jQuery peut également être implémenté, mais si vous utilisez jQuery pour l'implémenter, vous devez exploiter directement le DOM, et le code est plus compliqué.

Alors quelle méthode devrions-nous utiliser ? Pourquoi ne pas utiliser v-bind ? Faites-le, jetons un oeil !

Complétez d'abord l'effet d'un nouveau div apparaissant au survol de la souris

Une partie du code html est la suivante :

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

Une partie du code js est la suivante :

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

C'est très simple, pour que lorsque la souris passe sur l'avatar personnel (person_img), les informations personnelles person_con apparaîtront comme suit.

Voici la clé : comment empêcher la div des informations personnelles de disparaître lorsque la souris passe sur l'avatar personnel vers la div des informations personnelles, afin que davantage d'opérations commerciales puissent être effectuées ?

L'idée naturelle est d'ajouter @mouseover et @mouseout à person_con.

Alors sachez que le div des informations personnelles ne disparaît pas lorsque la souris passe sur l'avatar personnel vers le div des informations personnelles

Une partie du code html est la suivante :

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

Une partie du code js est la suivante :

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

À ce stade, la fonction complète ne peut pas être réalisée car le code n'est pas encore parfait. Pourquoi? Parce que lorsque la souris est déplacée hors de l'avatar personnel, person_con redevient faux, ce qui fait que person_infoContinue() et cl_person_infoContinue() n'ont aucun effet. Alors que devons-nous faire ? L'idée naturelle est d'ajouter une autre variable intermédiaire. Dans la méthode cl_person_info(), j'utilise cette variable pour porter des jugements.

Une partie du code js est la suivante :

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

À ce stade, la fonction de flottement du menu secondaire est complétée en utilisant une logique simple pour déterminer vrai et faux.

Apprentissage recommandé : Formation php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!