반응형
사용자가 Vue JS에서 탐색 컨테이너 외부를 클릭할 때 탐색을 닫거나 전환하는 방법
토글된 네비게이션 메뉴와 그 메뉴 안쪽에 다른 2개의 ul 메뉴가 있습니다.사용자가 네비게이션 컨테이너를 클릭하여 꺼낸 경우 닫기 버튼을 클릭하는 대신 네비게이션이 자동으로 닫히도록 전환되도록 기능을 구현하고 싶습니다.사용자가 Toggled Nav Container(전환된 내비게이션 컨테이너)를 클릭해 꺼낼 때 subNavActive(safNavAcitve) 및 repNavUl(repNavUl) =을 다시 false(false)로 만들고 싶습니다.새로운 Vue({ el: '#app',
data: {
visible: false,
home: true,
show: false,
active: false,
subNavActive: false,
safNavShow: false,
repNavUl: false,
admNavShow: false,
rotateDropDown: false
},
methods: {}
});
아래 HTML 코드
<div class="container">
<!-- Main nav starts here -->
<!-- main nav vue transition below -->
<transition name="slide-fade">
<!-- vue animation if/else below -->
<nav class="main-nav" v-if="show">
<!-- Main nav header and title -->
<div class="main-nav-header">
<h2>Hello User</h2>
<h3>Welcome Back</h3>
</div>
<div class="main-nav-container">
<!-- Main navigation ul list below -->
<ul class="main-nav-ul">
<li>
<li class="split-li">
<span>
<i class="fas fa-calendar-alt"></i>
</span>
MY SCHEDULE & BIDDING
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-right"></i>
</a>
</li>
</li>
<li>
<li class="split-li">
<span>
<i class="fas fa-handshake"></i>
</span>
SAFETY
<a class="main-nav-spans" @click="safNavShow = !safNavShow" href="#">
<i class="fas fa-angle-right"></i>
</a>
</li>
<!-- Sub nav transition below -->
<transition name="slide-right">
<!-- vue animation if/else below -->
<div class="sub-nav saf-nav-toggle" v-if="safNavShow">
<div class="sub-nav-header ">
<h3>
<li class="split-li">
<span>
SAFETY
</span>
<a @click="safNavShow = !safNavShow" class="sub-nav-icons" href="#">
<i class="fas fa-times"></i>
</a>
</li>
</h3>
</div>
<ul class="sub-nav-menu">
<li>
<li class="split-li">
<span>
Reporting
</span>
<a @click="repNavUl =!repNavUl, rotateDropDown =!rotateDropDown" v-bind:class="{ rotateDropDown: rotateDropDown }" class="main-nav-spans"
href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
<transition name="rep-nav">
<ul class="sub-nav-ul" v-if="repNavUl">
<li>
<a href="#">I-21 Injury Reporting</a>
</li>
<li>
<a href="#">ASAP Reporting</a>
</li>
<li>
<a href="#">General ASAP Information</a>
</li>
<li>
<a href="#">Flight Attendent Incident Report</a>
</li>
</ul>
</transition>
</li>
<li>
<li class="split-li">
<span>
Agriculture & Customs
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
</li>
<li>
<li class="sub-first-nav-li">
<a href="#">Known Crewmember</a>
</li>
</li>
<li>
<li class="sub-first-nav-li">
<a href="#"> Products Safety Data Search</a>
</li>
</li>
</ul>
</div>
</transition>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-users"></i>
</span>
<a href="#">TRAINING</a>
</li>
</li>
<li>
<li class="split-li ">
<span>
<i class="fas fa-user"></i>
</span>
ADMINSTRATION
<a class="main-nav-spans" @click="admNavShow = !admNavShow" href="#">
<i class="fas fa-angle-right"></i>
</a>
</li>
<transition name="slide-right">
<div class="sub-nav admin-nav-toggle" v-if="admNavShow">
<div class="sub-nav-header">
<h3>
<li class="split-li">
<span>
ADMINSTRATION
</span>
<a @click="admNavShow = !admNavShow" class="sub-nav-icons" href="#">
<i class="fas fa-times"></i>
</a>
</li>
</h3>
</div>
<ul>
<li>
<li class="split-li">
<span>
OJI and Leaves
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
</li>
<li>
<li class="split-li">
<span>
Pay and Benefits
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
</li>
<li>
<li class="split-li">
<span>
Performace
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
</li>
<li>
<li class="sub-first-nav-li">
<a href="#">Inflight Resource Directory</a>
</li>
</li>
<li>
<li class="split-li">
<span>
Mobile and Web
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-down"></i>
</a>
</li>
</li>
<li>
<li class="sub-first-nav-li">
<a href="#">AFA</a>
</li>
</li>
</ul>
</div>
</transition>
</li>
<li>
<li class="split-li ">
<span>
<i class="fas fa-utensils"></i>
CATERING & BRAND
</span>
<a class="main-nav-spans" href="#">
<i class="fas fa-angle-right"></i>
</a>
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-bed"></i>
</span>
<a href="#">HOTELS</a>
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-home"></i>
</span>
<a href="#">MY BASE</a>
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-certificate"></i>
</span>
<a href="#">RECOGNITION</a>
</li>
</li>
<li>
<li class="split-li no-arrow-li">
<span>
<i class="fas fa-male"></i>
</span>
<a href="#">MY LEADERSHIP TEAM</a>
</li>
</li>
</ul>
</div>
</nav>
</transition>
</div>
사용해보았다Vue-Clickawayhttps://github.com/simplesmiler/vue-clickaway
솔루션은 다음과 같습니다.
'vue-clickaway'에서 {mixin as clickaway }을(를) Import한다.
export default {
mixins: [ clickaway ],
template: '<p v-on-clickaway="away">Click away</p>',
methods: {
away: function() {
console.log('clicked away');
},
},
};
언급URL : https://stackoverflow.com/questions/49344183/how-to-close-toggle-navigation-when-users-clicks-outside-the-nav-container-in-vu
반응형
'programing' 카테고리의 다른 글
| vuejs2/vuex: 돌연변이에 대한 다중 구독을 방지하는 방법 (0) | 2022.07.06 |
|---|---|
| Vue 전환을 사용하여 div를 확장 및 축소하는 방법 (0) | 2022.07.06 |
| 매핑된 Vuex 함수는 함수가 아니지만 로드됩니다. (0) | 2022.07.03 |
| 길이를 알 수 없는 입력 문자열을 읽으려면 어떻게 해야 합니까? (0) | 2022.07.03 |
| 하위 구성 요소에 대한 v-model 및 하위 구성 요소 Vue 내부의 v-model (0) | 2022.07.03 |