Как создать адаптивную панель приложений Vuetify - PullRequest
Новая
       25

Как создать адаптивную панель приложений Vuetify

1 голос
/ 08 февраля 2020

Я пытаюсь настроить отзывчивую панель приложения Vuetify в Vue. js проекте. При просмотре на экране мобильного устройства навигационные ссылки отображаются в раскрывающемся меню из трех точек. 

<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 точками только в мобильном представлении? Спасибо!

1 Ответ

1 голос
/ 09 февраля 2020

Я обычно делаю себе небольшую вспомогательную функцию 

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

Различные доступные точки останова перечислены здесь . Затем вы можете использовать его в своем шаблоне как 

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

</v-menu>

В качестве альтернативы, вы можете просто использовать $vuetify прямо в вашей разметке. 

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

</v-menu>
...