Добавить класс только на мобильном телефоне - Vuejs и bootstrap

Question

Я хочу добавить класс только на мобильном телефоне. Я сделал это перед использованием vuetify, однако с vue это кажется более сложным:

Код:

<div class="{'mobileSnackBar': breakpoint.xs}">
  <p> This is my snackbar </p>
</div>

в vuetify у вас есть $vuetify.breakpoint.xs как бы получить подобный эффект с начальной загрузкой? Или, пожалуйста, порекомендуйте альтернативу.

Answer 1

С vuetify вы можете сделать:

computed: {
    is_screen_small() {
        return this.$vuetify.breakpoint.smOnly
    },
}

И объединить это так:

<div class="{'mobileSnackBar': is_screen_small}">
  <p> This is my snackbar </p>
</div>

Пожалуйста, убедитесь, что вы прочитали документы vuetify для точек останова , чтобы знатьподробнее.

Однако, как мне известно, при начальной загрузке единственным способом является использование медиазапросов:

// Small devices 
@media (max-width: 760px) { 
  //Add your style here
 }

Хотя есть решение, не связанное с начальной загрузкой:

computed: {
  is_mobile() {
    const isMobile = window.matchMedia("only screen and (max-width: 760px)")
    return isMobile.matches ? true : false
  }
}

И объединить это как:

<div class="{'mobileSnackBar': is_mobile}">
  <p> This is my snackbar </p>
</div>