바로전에 App Bar를 구성해 보았습니다. 그 요소중에서 App Bar Navigator에 대해서 좀 더 깊이 알아보겠습니다. 사실 기존에 구현한 내용은 Navigator를 통해서 생성한 icon을 클릭했을때 아무런 반응이 없었습니다. 하시만 실제적으로는 클릭을 한다면 무언가... 왼쪽에서 메뉴판이 쫙 나오면서 리스트를 제공해야 합니다.
이렇게 가능하게 해주는 tag는 바로...
<v-navigation-drawer/>
입니다. 하지만 실질적인 코드적인 내용으로 생각해보면... <v-app-bar-nav-icon/>을 클릭하면 <v-navigation-drawer/>가 보이게 하고, <v-navigation-drawer/>이외의 영역을 클릭하면 사라지게 하는 것 입니다. 그럼 차근차근 알아보도록 하겠습니다.
1. v-navigation-drawer 구현
우선 v-navigation-drawer 자체를 구현해 보겠습니다. 실질적으로 안에 menu는 아직 넣지 않도록 하구요. 목표로 하는 화면 구성은 아래와 같습니다.
상단에 <v-app-bar-nav-icon/>를 클릭하면... 아래와 같이 왼쪽에서 v-navigation-drawer이나오고...나머지 화면은 Gray처리가 됩니다. 이때 Gray영역을 클릭하면 v-navigation-drawer가 사라집니다.
구현방법은 상당히 간단합니다.
- <v-app-bar-nav-icon/> 영역에 마우스 클릭 시, <v-navigation-drawer/>를 표기할 boolean 구분자를 toggle할 로직을 추가
- <v-navigation-drawer/> tag 작성
- script에 data( )부분에 boolean 변수 추가
이렇게 3가지를 하면 됩니다.
[toggle 로직추가]
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>v-app-bar-nav-icon에는 1가지 prop만 추가가 됩니다. @click에 대한 동작입니다. 마우스로 해당 icon을 클릭했을때 동작을 지정하는데... 여기서는 stop을 지정합니다. 그렇게되면, 클릭 후 이후 로직에 대한 중지여부를 boolean변수로 값을 세팅하게 됩니다.
결국 우리가 구현하고자 하는 부분에 대해서는, @click.stop = 'true' 면 모든게 끝나게 됩니다. 하지만 이렇게 구현하는 이유는 v-navigation-drawer위에서 어떤 동작을 했을때, 해당 drawer가 없어져야 하는 경우도 있기 때문입니다. 이럴 경우에는 당연히 해당 변수를 false로 만들겠지요.
[v-navigation-drawer 추가]
</v-app-bar>
<v-navigation-drawer v-model="drawer" absolute bottom temporary>
</v-navigation-drawer>
<v-content>보시는 바와 같이, 위치는 v-app-bar가 끝난 시점과, 메인 화면이 구현되는 v-content사이에 구현합니다. 인자는 여러가지가 있으며, 부가적인 prop는 아래에 살펴보도록 하겠습니다. 우선 v-model에 대해서 간단히 살펴보면, 양방향 데이터 바인딩을 위한 인자로... 해당 data( )내 변수가 변경이 되면 실시간으로 v-dom에 반영을 해 줍니다.
따라서, v-app-bar-nav-icon을 통해서 drawer가 마우스 클릭으로 인하여 변경이 된다면... 바로 적용되서 v-navigation-drawer가 변경이 되는 것 입니다.
| 항목 | 기능 |
| absolute | navigation drawer의 크기를 현재 실행하는 브라우저에 맞게 조정 |
| bottom | 화면이 작은 환경에서는 navigation이 하단에서 올라오게 함 |
| temporary | 현재 동작중인 vue.js화면 위에 배치시키고 배경은 gray처리하여 비활성화 시킴 |
하단에서 올라온다면 이렇게 동작을 하게 됩니다.
[script data( ) 변수추가]
<script>
export default {
name: 'App',
data() {
return {
drawer: false,
};
},
};
</script>이렇게 drawer에 대한 변수를 초기값을 false로 추가해 줍니다.
2. v-navigation-drawer 동작로직
전체적으로 구현에 대해서는 정리가 되었고, 실질적인 동작로직에 대해서 한번 정리해 보겠습니다. 의외로 동작로직은 간단해 보입니다.
- script data( )내 drawer는 false로 시작되며, v-navigation-drawer는 v-model이 false이므로 비활성화 상태임
- v-app-bar-nav-icon을 클릭하면 @click.stop에 의해서 drawer에 !drawer인 true값을 drawer에 저장하고, 이 동작으로 v-navigation-drawer는 v-model이 true가 되어서 활성화 상태로 변경됨
- v-navigation-drawer 활성화 화면에서 gray영역을 클릭하면 @click.stop에 의해서 한번더 drawer값이 toggle되고, 역시 이 동작으로 v-model이 false가 되서 v-navigation-drawer는 비활성화 되어 사라짐
이렇게 동작을 하게 됩니다. 은근 체계적으로 동작하는 것을 확인 할 수 있습니다. 이제 남은건 v-navigation-drawer를 원하는 메뉴를 추가해서 꾸미는 일이 남겠네요.
- Ayotera Lab -
댓글