Nuxt/Vue로 모바일 메뉴 표시 및 숨기기

이것은 Nuxt/Vue로 문서 사이트 템플릿을 만드는 곳의 연속입니다.


우리는 대화형 모바일 메뉴를 만들기 위해 Vue, TailwindCSS 및 Nuxt의 경로 처리와 함께 작업할 것입니다.

모바일 메뉴 아이콘 탭에 모바일 메뉴 표시

MainHeader.vue 파일에서 클릭 이벤트를 모바일 메뉴 아이콘에 처리하는 방법을 추가한 다음 모바일 메뉴를 표시하도록 트리거합니다.

<button @click="showMobileMenu" ...>

탭하면 showMobileMenu 함수가 호출되며 이 함수는 <script> 섹션에 메서드로 추가됩니다.

methods: {
    showMobileMenu () {
      this.$emit('showMobileMenu')
    }
  }

이 함수는 클릭 이벤트를 상위 구성 요소로 내보냅니다. 이 경우 상위 구성 요소는 여기에서 이벤트가 추가로 처리되는 기본dafault.vue 레이아웃 파일입니다.

default.vue 파일에서 이벤트를 캡처한 다음 곧 정의할 showMobileMenu 데이터 요소의 상태를 변경합니다.

<MainHeader @showMobileMenu="showMobileMenu = true" v-show="!showMobileMenu" />

또한 알 수 있습니다 v-show="!showMobileMenu" . 이것은 주로 모바일 메뉴가 위치에 '고정'되어 끊김 유형 효과가 발생하는 모바일 메뉴에 적용된 전환 효과 때문에 추가되었습니다. 문제가 되지 않는 모바일 메뉴에 다른 전환 효과를 적용하면 삭제할 수 있습니다.

이제 showMobileMenu 데이터 요소를 정의하겠습니다.
<script> 태그 내에 다음을 간단히 추가합니다.

export default {
  data () {
    return {
      showMobileMenu: false
    }
  }
}

그런 다음 MobileMenu가 showMobileMenu 또는 true로 설정되어 있는지 여부에 따라 표시하거나 숨길 false 구성 요소를 연결해야 합니다.

<MobileMenu v-show="showMobileMenu" @closeMobileMenu="showMobileMenu = false" />

@closeMobileMenu="showMobileMenu = false"는 사용자가 모바일 메뉴 닫기 아이콘을 선택하는 경우 MobileMenu 구성 요소에서 발생한 클릭 이벤트를 감지합니다.

이 경우 메뉴가 보기에서 사라지도록 showMobileMenu를 false로 설정합니다.

링크 클릭 시 모바일 메뉴 숨기기

모바일 메뉴를 보기에서 숨기려는 몇 가지 작업이 있습니다.

사용자가 클릭하여 모바일 메뉴를 닫는 경우

사용자가 모바일 메뉴에서 내부 링크를 클릭하는 경우

사용자가 클릭하여 모바일 메뉴를 닫는 경우

위에서 우리는 showMobileMenu를 false로 설정하여 내보낸 닫기 모바일 메뉴 이벤트를 처리하고 있음을 확인했습니다.

이 원본을 MobileMenu.vue 파일에 추가합니다.

'x' 버튼에 클릭 이벤트 감지를 추가하겠습니다.

<button @click="closeMobileMenu" ...>

그런 다음 <script> 섹션에 해당 메서드를 추가합니다.

methods: {
    closeMobileMenu () {
      this.$emit('closeMobileMenu')
    }

사용자가 모바일 메뉴에서 내부 링크를 클릭하는 경우

Nuxt를 사용하고 있으므로 <nuxt-link to> 태그를 사용하여 내부 링크를 정의하려고 합니다.

이것의 단점은 모바일 메뉴 링크를 클릭할 때 모바일 메뉴가 계속 열려 있지 않도록 경로 변경을 처리해야 한다는 것입니다.

운 좋게도 이것은 설명하기 쉽고 'default.vue' 파일에 추가할 몇 줄의 코드만 있으면 됩니다.

watch: {
    '$route' () {
      this.showMobileMenu = false
    }
  },

보시다시피 경로 변경을 감시하고 경로가 변경되면 showMobileMenu를 false로 설정합니다. 이렇게 하면 모바일 메뉴에서 링크를 클릭할 때 새 페이지로 이동하고 더 이상 표시되지 않도록 모바일 메뉴를 닫을 때 원하는 효과를 얻을 수 있습니다.

팔로우? 이 튜토리얼의 코드를 보려면 GitHub Repo - phase 2을 보십시오.

YouTube에서 전체 동영상을 볼 수도 있습니다.

VPS 서버 및 앱 배포를 관리할 도구를 찾고 계십니까? cleavr.io에서 확인하세요.

Vue/Nuxt, Tailwind 및 Algolia를 사용하여 문서 사이트를 만드는 방법에 대한 전체 자습서 시리즈입니다.

NuxtJS / 콘텐츠 모듈 시작하기

Adam Miedema ・ 1월 12일 ・ 3분 읽기

#nuxt #vue #node #tutorial

Nuxt / Vue로 모바일 메뉴 표시 및 숨기기

Adam Miedema ・ 1월 13일 ・ 3분 읽기

#nuxt #vue #tutorial

Nuxt/Content 및 Tailwind Typography로 스타일을 사용하여 Vue에 Markdown 가져오기

Adam Miedema ・ 1월 13일 ・ 4분 읽기

#nuxt #vue #tutorial

Nuxt/Content 및 Aloglia vue-instantsearch로 키보드 탐색 가능한 사이트 검색 생성

Adam Miedema ・ 1월 13일 ・ 5분 읽기

#algolia #vue #nuxt #tutorial