안녕하세요, 유이 입니다.

여러분 Vue.js에서 스마트 폰 만 사이드 메뉴 등을 숨기고 싶다면 어떻게합니까?
어쩌면 여러 가지 방법이 있다고 생각합니다만, 나는 항상 표시 숨기기의 전환은 개인적으로 제일 편한 v-if/v-show 를 사용하고 있습니다.

그리고 화면 사이즈에 따라 표시·숨기기를 전환하기 위해 v-if="$vuetify.breakpoint.xs"
이번에, 언제나처럼 v-if/v-show 와 $vuetify.breakpoint 를 조합해 표시 숨기기를 바꾸려고 하면, 작동하지 않았으므로, 대신에 scss로 조정한 방법을 정리합니다.

$vuetify.breakpoint란?

원래, $vuetify.breakpoint 란 무엇인가 쓰는 방법이라고 하면, Vuetify에서는 아래와 같이 화면 사이즈가 미리 정해져 있어, 예를 들면 v-if="$vuetify.breakpoint.xs" 라고 쓰는 것으로, 그 요소를 스마트폰만 표시로 할 수 있다 합니다.


Vuetify 문서에서

덧붙여서, v-if와 v-show의 전환은, v-if가 너무 자주 전환하지 않는 경우, v-show는 자주 표시 숨기기를 전환하는 경우에 사용하는 것이 좋다고 되어 있습니다. (v-if 쪽이 전환시에 부하가 걸린다.)

이번에 일어난 문제

우선 여기를 참조하십시오.

버튼을 누르면 사이드 콘텐츠가 표시되지만 버튼이 사라집니다.



이번에는 헤더 아래에 보라색 "열기"버튼을 놓고 그 버튼을 놓으면 사이드 컨텐츠가 표시되도록 하고 있습니다.

PC 버전에서는 사이드 컨텐츠가 기본적으로 표시되어 있으므로 이 버튼은 표시할 필요가 없습니다.
그래서 스마트 폰에서만 표시하기 위해 이렇게 썼습니다.

App.vue

<v-btn v-if="$vuetify.breakpoint.xs"
 color="purple"
 dark
 @click.stop="drawer = !drawer"
>
   開く
</v-btn>

〜〜〜〜
<v-navigation-drawer
 v-model="drawer"
 absolute
 right
>
　<SideComment/>
</v-navigation-drawer>

※사이드 컨텐츠는 페이지를 나누고, SideComment.vue 로서 만들고 있습니다.

표시를 보면, 위와 같이 버튼은 무사 스마트폰으로만 표시되지만, 한 번 밖에 누르지 않게 되어 버렸습니다. 덧붙여서, 이번은 PC와 스마트폰은 빈번하게 바뀌는 일도 없으면 v-if 를 사용하고 있습니다만, v-show 를 사용해도 한 번만 밀 수 있는 것은 변하지 않았습니다.

분명히 v-if/v-show와 @click의 움직임은 함께 사용할 수없는 것 같습니다.
※만약 병용할 수 있는 방법을 아시는 분은 조용히 저에게 귀를 기울여 주세요. 웃음
(적어도 여러가지 조사한 한에서는, v-if

무슨 일이야

v-show/@click 를 사용할 수 없게 되면, scss로 v-if 설정을 할 수 밖에 없습니다.
그래서,

App.vue

<v-btn v-if="$vuetify.breakpoint.xs"
 class="sp-visible"
 color="purple"
 dark
 @click.stop="drawer = !drawer"
>
   開く
</v-btn>

〜〜〜〜
<style lang="scss" scoped>
 $pc-min: 960px;
 @mixin display_pc {
   @media (min-width: $pc-min) {
     @content;
   }
 }
 .sp-visible {
   @include display_pc {
     display: none !important;
   }
 }
</style>

클래스 이름을 붙여 거기에 scss를 적용시키고 있습니다.v-show 처음 사용했지만 꽤 편리했습니다. (참고: Sass의 「@mixin(믹스 인)」의 사용법과 「인수」의 해설 )

이번에는 태블릿의 표시는 우선 두어두고, 우선 PC에서만 숨기는 것이 목적이었기 때문에, 이런 거친 브레이크 포인트로 설정했습니다.

완성형

이러한 느낌으로, 버튼은 눌러도 사라지지 않게 되었으므로, 우선은 성공입니다.

물론, 이대로는 아직도 반응형으로 불완전하기 때문에, 계속해서 레이아웃은 정돈합니다만, 우선은 목표 달성입니다! 했어!

이번에 display 에 꽤 감동했으므로, 또 정리하고 싶습니다.