vue.js에서 보조 드롭다운 부동 메뉴를 구현하는 방법

보조 드롭다운 플로팅 메뉴를 구현하는 Vue.js 방법: 1. 마우스를 가리키면 새 div가 나타나는 효과 완성 2. 마우스가 개인 아바타를 지나갈 때 개인 정보 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에 마우스를 올렸을 때 개인정보 div가 사라지는 것을 방지하여 더 많은 업무를 수행할 수 있는 방법은 다음과 같습니다.

person_con에 @mouseover 및 @mouseout을 추가하는 것이 자연스러운 아이디어입니다.

그러면 개인 아바타에서 개인정보 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()가 실제로 아무런 효과가 없기 때문입니다. 그럼 우리는 어떻게 해야 할까요? 자연스러운 아이디어는 또 다른 중간 변수를 추가하는 것입니다. 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>

이 시점에서 간단한 논리를 사용하여 참과 거짓을 판별함으로써 보조 메뉴를 플로팅하는 기능이 완성됩니다.

추천 학습: php training

위 내용은 vue.js에서 보조 드롭다운 부동 메뉴를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!