vue.js で 2 番目のドロップダウン フローティング メニューを実装する方法

2 番目のドロップダウン フローティング メニューを実装する Vue.js メソッド: 1. マウスをホバーしたときに表示される新しい div の効果を完成します; 2. マウスをホバーしても個人情報 div が消えないことを認識します。個人アバターを個人情報 div に渡します; 3. 中間変数を追加し、この変数を cl_person_info() メソッドでの判断に使用します。

#この記事の動作環境: Windows10 システム、vue 2.5.2、thinkpad t480 コンピューター。

実際の開発プロジェクトでは、セカンダリ メニューのような機能を実装する必要がある場合がありますが、手間をかけたい場合は、既存の Element UI フレームワークを直接使用できます。ただし、この方法には大きな欠点があり、各コードの意味を理解しなければ、コードを変更して目的の動的効果を実現できないため、この方法はお勧めしません。

友達の中には、jQuery はないのかと尋ねる人もいるかもしれません。はい、jQuery も実装できますが、jQuery を使用して実装すると、DOM を直接操作する必要があり、コードがより複雑になります。

それでは、どの方法を使用すればよいでしょうか?なぜ v-bind を使用しないのでしょうか?やってみよう、見てみましょう！

まず、マウスをホバーしたときに表示される新しい 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:&#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>

とても簡単です このように、個人アバター(person_img)の上にマウスを置くと、下に個人情報person_conが表示されます。

ここからがポイントですが、個人アバターにマウスを重ねたときに個人情報divが消えないようにして、より業務を進めるにはどうすればよいでしょうか？

@mouseover と @mouseout を person_con に追加するのが自然なアイデアです。

マウスが個人アバターを個人情報の 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:&#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>

コードがまだ完全ではないため、この時点では完全な機能を実現できません。なぜ？マウスが個人アバターの外に出ると、person_con が再び false になり、person_infoContinue() と cl_person_infoContinue() が無効になるためです。だから何をすべきか？中間変数をもう 1 つ追加するのが自然な考え方で、 cl_person_info() メソッドではこの変数を使用して判断します。

js コードの一部は次のとおりです。

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

この時点で、true と false を判断する単純なロジックを使用して、セカンダリ メニューをフローティングする機能が完了します。

推奨学習:

php トレーニング

以上がvue.js で 2 番目のドロップダウン フローティング メニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。