응답성 높은 Vuetify 앱바 구축 방법

응답성 높은 Vuetify 앱바 구축 방법

Vue.js 프로젝트에서 응답성 높은 Vuetify 앱 바를 설정하려고 합니다.내비게이션 링크는 모바일 화면에서 볼 때 3점 드롭다운 메뉴에 렌더링됩니다.

<v-app>
    <v-app-bar color="indigo" dark fixed app>
      <v-toolbar-title>Toolbar Mobile Menu</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn text to="create">
          <span class="mr-2" v-if="activeUser">Create Post</span>
        </v-btn>
        <v-btn text to="/">
          <span class="mr-2" v-if="activeUser">All Posts</span>
        </v-btn>
      </v-toolbar-items>

      <v-menu class="hidden-md-and-up">
        <template v-slot:activator="{ on }">
          <v-btn icon v-on="on">
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>

        <v-list>
          <v-list-item v-if="activeUser" to="create">
            <v-list-item-title>Create Post</v-list-item-title>
          </v-list-item>
          <v-list-item v-if="activeUser" to="/">
            <v-list-item-title>All Posts</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>

문제는 3점 버튼이 전체 화면과 모바일 모두에서 렌더링된다는 것입니다.물론 그 버튼은 모바일에서만 볼 수 있도록 하고 싶다.이 문제를 해결하기 위해, 저는 이 버튼의 내부를v-toolbar-items태그도 동작하지 않았습니다.모바일 뷰에만 3점 버튼이 표시되도록 이 앱 바를 구성하는 방법에 대한 권장 사항이 있습니까?감사합니다!

나는 보통 작은 도우미 기능을 만든다.

isMobile() {
  return this.$vuetify.breakpoint.xsOnly;
}

사용 가능한 여러 중단점이 여기에 나열됩니다.
그러면 템플릿에서 다음과 같이 사용할 수 있습니다.

<v-menu v-if="isMobile">

</v-menu>

또는, 단지,$vuetify마크업에 직접 입력해 주세요.

<v-menu v-if="$vuetify.breakpoint.xsOnly">

</v-menu>

언급URL : https://stackoverflow.com/questions/60128083/how-to-build-a-responsive-vuetify-app-bar