Правильный способ подрезать опору в Vuetify - PullRequest
Новая
       24

Правильный способ подрезать опору в Vuetify

0 голосов
/ 11 апреля 2020

Не уверен, как правильно применить обрезанную опору к <v-navigation-draw/> в приложении vuetify, чтобы заставить навигационный ящик сидеть под панелью приложения. Что я пробовал.

Создан проект fre sh: 

$ vue create mylayout
$ cd mylayout
$ vue add vuetify

Вырежьте и вставьте готовый макет Baseline (https://vuetifyjs.com/en/getting-started/pre-made-layouts/ ) в src/App.vue

Отредактируйте <v-navigation-drawer/>

<v-navigation-drawer
      v-model="drawer"
      app
      clipped         <--- added this prop
>

Отредактируйте <v-app-bar/>

<v-app-bar
  app
  color="indigo"
  dark
  clipped-left        <--- added this prop
>

Просмотр в FireFox 75.0 и выберите приложение -бар значок гамбургера, и панель навигации «всплывает» над панелью приложения. Я часами поливал документы и образцы без всякой радости. Я знаю, что что-то упустил, но это ускользает от меня.

1 Ответ

0 голосов
/ 12 апреля 2020

Проблема вызвана вычисленным свойством VNavigationDrawer компонента isMobile. У меня было увеличено мое личное представление в FireFox. Vuetify посчитал мой взгляд равным компоненту, отображаемому на мобильном устройстве, и проигнорировал усеченную опору.

Решение состоит в том, чтобы либо расширить компонент VNavigationBar и сбросьте флажок для isMobile, или для уменьшения (я выбираю уменьшение).

На случай, если кто-то еще наткнется на это, я включил соответствующий расчет isMobile () ниже и включил комментарий . 

isMobile (): boolean {
  return (
    !this.stateless &&
    !this.permanent &&
    // The next line is the check for a mobile-width view
    this.$vuetify.breakpoint.width < parseInt(this.mobileBreakPoint, 10)
  )
},
...