vue.js怎麼實現二級下拉懸浮選單

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  src="/static/imghwm/default1.png"  data-src="img_url"  class="lazy"  id="person_img" :  @mouseover="person_info()" @mouseout="cl_person_info()"/ alt="vue.js怎麼實現二級下拉懸浮選單" >
 </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時個人資訊的div不消失，繼而進行更多的業務操作呢？

自然的想法就是再給person_con加上@mouseover和@mouseout。

接著實作滑鼠經過個人頭像到個人資訊的div時個人資訊的div不消失

html部分程式碼如下：

<template>
<div class="person_img" >
    <img  src="/static/imghwm/default1.png"  data-src="img_url"  class="lazy"  id="person_img" :  @mouseover="person_info()" @mouseout="cl_person_info()"/ alt="vue.js怎麼實現二級下拉懸浮選單" >
 </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()其實是不起效果的。那又該怎麼辦呢？自然的想法就是再增加一個中間變量，在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怎麼實現二級下拉懸浮選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！