So implementieren Sie ein sekundäres schwebendes Dropdown-Menü in vue.js

Vue.js-Methode zum Implementieren eines sekundären schwebenden Dropdown-Menüs: 1. Vervollständigen Sie den Effekt, dass ein neues Div angezeigt wird, wenn Sie mit der Maus darüber fahren. 2. Beachten Sie, dass das Div mit persönlichen Informationen nicht verschwindet, wenn die Maus über den persönlichen Avatar geht 3. Fügen Sie eine mittlere Variable hinzu. Sie können diese Variable verwenden, um in der cl_person_info()-Methode Urteile zu fällen.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue 2.5.2, Thinkpad T480-Computer.

In tatsächlichen Entwicklungsprojekten müssen wir möglicherweise Funktionen implementieren, die sekundären Menüs ähneln. Wenn wir faul sein möchten, können wir direkt das vorhandene Element-UI-Framework verwenden. Diese Methode weist jedoch einen großen Nachteil auf. Nur wenn wir die Bedeutung jedes Codes verstehen, können wir den Code ändern, um den gewünschten dynamischen Effekt zu erzielen. Daher empfehlen wir diese Methode nicht.

Einige Freunde fragen sich vielleicht: Gibt es nicht jQuery? Ja, jQuery kann auch implementiert werden. Wenn Sie es jedoch mit jQuery implementieren, müssen Sie das DOM direkt bedienen, und der Code ist komplizierter.

Welche Methode sollten wir also verwenden? Warum nicht V-Bind verwenden? Mach es einfach, lass uns einen Blick darauf werfen!

Vervollständigen Sie zunächst den Effekt eines neuen Div, das angezeigt wird, wenn die Maus darüber schwebt.

Ein Teil des HTML-Codes lautet wie folgt:

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

Ein Teil des JS-Codes lautet wie folgt:

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

Es ist sehr einfach Wenn die Maus über den persönlichen Avatar (person_img) fährt, werden die folgenden persönlichen Informationen person_con angezeigt.

Das Folgende ist der Schlüssel. Wie kann verhindert werden, dass die Abteilung für persönliche Informationen verschwindet, wenn die Maus über den persönlichen Avatar zur Abteilung für persönliche Informationen bewegt wird, sodass mehr Geschäftsvorgänge ausgeführt werden können?

Die natürliche Idee ist, @mouseover und @mouseout zu person_con hinzuzufügen.

Dann stellen Sie fest, dass das Div der persönlichen Informationen nicht verschwindet, wenn die Maus über den persönlichen Avatar zum Div der persönlichen Informationen fährt.

Ein Teil des HTML-Codes lautet wie folgt:

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

Ein Teil des JS-Codes lautet wie folgt:

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

Zu diesem Zeitpunkt kann die vollständige Funktion nicht realisiert werden, da der Code noch nicht perfekt ist. Warum? Denn wenn sich die Maus aus dem persönlichen Avatar herausbewegt, wird person_con wieder false, was dazu führt, dass person_infoContinue() und cl_person_infoContinue() eigentlich keine Wirkung haben. Was sollen wir also tun? Die natürliche Idee besteht darin, eine weitere Zwischenvariable hinzuzufügen. In der Methode cl_person_info() verwende ich diese Variable, um Urteile zu fällen.

Ein Teil des JS-Codes lautet wie folgt:

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

An diesem Punkt ist die Funktion des schwebenden sekundären Menüs durch Verwendung einfacher Logik zur Bestimmung von wahr und falsch abgeschlossen.

Empfohlenes Lernen: php-Schulung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein sekundäres schwebendes Dropdown-Menü in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!