Используйте вычисляемое свойство для привязки стиля на основе точек останова Vuetify Viewport - PullRequest
Новая
       53

Используйте вычисляемое свойство для привязки стиля на основе точек останова Vuetify Viewport

0 голосов
/ 19 мая 2019

Работая с VueJS и пытаясь стилизовать некоторый текст на основе точек останова области просмотра Vuetify, я достиг этого, привязав стиль к условию, подобному следующему: 

:style="$vuetify.breakpoint.name === 'xs' ? { 'font-size': '1.5rem !important' }: { 'font-size': '2.5rem !important' }"

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

Я смотрел на это обсуждение и пытался скопировать ответ с @ raina77ow, но не слишком уверен, что я делаю неправильно.

ниже мой код; Я пытаюсь стилизовать элемент h3 внутри v-card-title 

<template>
  <div>
    <section>
      <v-layout>
        <v-flex xs12 sm10 offset-sm1>
          <v-card flat width="auto">
            <v-card-title primary-title>
              <h3
                class="text-xs-center headline mb-0"
                :style="fontSize"
              >
                Some Header here
              </h3>
              <div class="text-xs-center pa-5 mx-5">{{ card_text }}</div>
            </v-card-title>
          </v-card>
        </v-flex>
      </v-layout>
    </section>
  </div>
</template>

<script>
export default {
  computed: {
    fontSize() {
      switch (this.$vuetify.breakpoint.name) {
        case "xs":
          return "1.5rem !important";
        default:
          return "3rem !important";
      }
    }
  },
  data() {
    return {
      card_text:
        "Lorem ipsum dolor sit amet, brute iriure accusata ne mea."
    };
  }
};
</script>

Глядя на Vuejs devtool, я вижу, как вычисляемое значение свойства изменяется как задумано, но просто не могу понять, почему оно не применяется к CSS

Может кто-нибудь сказать мне, что я делаю не так, пожалуйста!

1 Ответ

1 голос
/ 19 мая 2019

Похоже, что вычисляемое свойство не возвращает полную спецификацию стиля.Таким образом, вы можете изменить вычисляемую функцию 

case "xs":
    return {"font-size": "1.5rem !important"};
default:
    return {"font-size": "3rem !important"};

или изменить способ ее использования 

:style="{'font-size': fontSize}"
...