Изменить размер шрифта в Vuetify на основе области просмотра? - PullRequest
Новая
       32

Изменить размер шрифта в Vuetify на основе области просмотра?

0 голосов
/ 30 августа 2018

У меня есть заголовок: 

<v-card-text style="font-size:5em">
    Some Heading Here
</v-card-text>

Я хотел бы установить размер шрифта на 3em, когда вид XS. Прямо сейчас я продублировал это следующим образом: 

<v-card-text hidden-xs-only style="font-size:5em">
    Some Heading Here
</v-card-text>
<v-card-text visible-xs-only style="font-size:3em">
    Some Heading Here
</v-card-text>

Однако я бы хотел избежать этого дублирования и решить проблему с помощью только CSS , но без необходимости писать собственные @media запросы в локальном файле .vue. Это возможно?

В качестве альтернативы я могу использовать предопределенные классы вместо того, чтобы указывать размер шрифта напрямую или даже полностью разные элементы, например что-то вроде <h3>, когда это XS, но <h2> в других окнах просмотра.

Ответы [ 3 ]

0 голосов
/ 25 ноября 2018

Вы можете применить класс на основе области просмотра 

:class="{'subheading': $vuetify.breakpoint.xs}"
0 голосов
/ 21 мая 2019

Я тоже пытался разгадать эту загадку, так как кажется, что трудно разобраться в javascript для обработки простых изменений стиля для устройств разных размеров.

Как оказалось, генерация пользовательских правил CSS для разных точек останова довольно проста, потому что Vuetify использует Stylus и назначает точки останова для переменной Stylus. Естественно, эта переменная доступна в ваших пользовательских компонентах vue и файлах стилей (при условии, что вы правильно настроили препроцессор для компиляции стилуса).

Вот некоторые ресурсы, которые помогли мне лучше понять вещи:

  1. Настройка препроцессора:

    • https://vuetifyjs.com/en/framework/theme#setup-stylus-loader-with-webpack
    • В моем случае, используя Nuxt, настройка препроцессора для стилуса уже была установлена ​​для меня. Но чтобы этот подход работал, вам нужно быть уверенным, что вы можете скомпилировать Stylus.

  2. Изменение переменных стилуса - Vuetify:

  3. Стилус @media запросы - http://stylus -lang.com / docs / media.html

Как вы увидите, стилус $ display-breakpoints - ваш новый лучший друг!

Сложите все это, и вот что вы получаете в отдельном файловом компоненте Vue: 

<template>
  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <v-card>
        <v-card-title class="custom-selector headline">
          Welcome to the Vuetify + Nuxt.js template
        </v-card-title>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
export default {
  // ...
}
</script>

<style lang="styl">
.custom-selector
  font-size 3em
  @media $display-breakpoints.xs-only
    font-size 2em
  @media $display-breakpoints.lg-and-up
    font-size 5em
</style>

Обратите внимание, что в приведенном выше коде мы меняем размер шрифта компонента <v-card-title>, ориентируясь на него в наших медиа-запросах Stylus и используя объект $ display-breakpoints для определения желаемой точки останова.

Я думаю, что преимущество отсутствия инфраструктуры пользовательского интерфейса, которая генерирует каждую опцию на каждой точке останова, заключается в гораздо меньшем размере файла для загрузки. Кажется, что Vuetify + Stylus - более легкий подход, который делает написание пользовательских запросов @media самым простым и эффективным способом.

0 голосов
/ 30 августа 2018

Вы можете использовать объект точки останова, предоставленный и отслеживаемый самим Vuetify. Цитируя документы :

Vuetify преобразует доступные точки останова в доступный объект из вашего приложения. Это позволит вам назначить / применить конкретные свойства и атрибуты в зависимости от размера области просмотра.

Один возможный (и довольно прямой способ) упоминается на той же самой странице документации - использование вычисляемого свойства для вычисления размера шрифта: 

computed: {
  fontSize() {
    switch (this.$vuetify.breakpoint.name) {
      case 'xs': return '3em';
      default: return '5em';
    }
  }
}

... и используйте его в своем шаблоне напрямую. Конечно, вы можете сделать то же самое с динамическим именем класса - например, применяется к $vuetify.breakpoint.xsOnly.

...