0

estou trabalhando em um projeto vue.js/nuxt.js, onde eu preciso determinar estilos dentro do computed property e aplicar em uma div com base no tamanho da tela, como no exemplo abaixo:

<template>
  <div :style="css"></div>
</template>

<script>
export default {
  computed: {
    css () {
      let width = window.innerWidth

      // ... mobile { ... styles }
      // ... desktop { ... styles }

      // ... if width is less than 700, return mobile
      // ... if width greater than 700, return desktop
    }
  }
}
</script>

isso não da certo, gera um erro windows is note defined

no Nuxt.js, o window só estará disponível dentro do mounted, que é gancho de ciclo de vida onde a tela já foi renderizada, o que faz total sentido.

Eu poderia colocar toda essa lógica de estilo dentro de um método e chamar no mounted, ou colocar diretamente no mounted e aplicar na div, o problema é que o estilo será aplicado com um certo delay depois que a página é montada.

Então como posso saber o tamanho da largura interna da página dentro do computed property?

10
  • Um arquivo .vue tem 3 seções, <template>, <script> e <style>. Não seria melhor você adicionar um CSS com media queries dentro da tag <style>? Não entendi porque você está estilizando no JS. Commented 18/07/2019 às 20:31
  • @fernandosavio, nesse caso não, pois se trata de um componente reutilizável, logo a estilização será dinâmica e terá um certo nível de complexidade a ponto de que só atribuir uma classe CSS não resolveria o problema, precisar ser feita com com script.
    – Yung Silva
    Commented 18/07/2019 às 20:34
  • Entendi, acredito que deve ter um jeito melhor de fazer isso mas este link demonstra uma maneira de fazer isso.. Commented 18/07/2019 às 20:42
  • O próprio Evan You aconselha a fazer isso dentro dos lifecycle hooks.. então não sei se tem jeito melhor de fazer Commented 18/07/2019 às 20:44
  • Dá uma olhada nesse CodePen que fiz, acredito que te ajude. Seria uma boa ideia você dar um debounce ou um throttle no evento de resize para não sobre carregar o cliente. Commented 18/07/2019 às 21:04

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .