Así que estoy usando vuetify 2.0 dentro de mi aplicación vue.js y estoy tratando de hacer que mi contenedor v en mi Main.vue tome toda la altura disponible usando altura de relleno y fluido, pero no parece funcionar en todos.
Lo que tengo actualmente se ve así:
Captura de pantalla: https://imgur.com/K1yOhWu
aplicación.vue
<template> <v-app> <div v-if="connected"> <Main /> </div> <div v-else> <Login /> </div> </v-app> </template> <script> import Main from '@/views/Main' import Login from '@/views/Login' export default { components: { Main, Login }, data: () => ({ connected: true }) } </script>Principal.vue
<template> <div> <v-navigation-drawer app clipped dark> <v-list> <v-list-item link> <v-list-item-action> <v-icon>mdi-view-dashboard</v-icon> </v-list-item-action> <v-list-item-content> <v-list-item-title>Profil</v-list-item-title> </v-list-item-content> </v-list-item> <v-list-item link> <v-list-item-action> <v-icon>mdi-settings</v-icon> </v-list-item-action> <v-list-item-content> <v-list-item-title>Chat</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </v-navigation-drawer> <v-content> <v-container class="fill-height" fluid> <v-row class="fill-height chat-area" style="background-color: red"> <v-col> <p>yooo</p> </v-col> </v-row> <v-row class="text-field-area" style="background-color: green"> <v-col> <v-text-field outlined rounded label="Type your message" hide-details append-icon="mdi-send" @click :append="logger()"></v-text-field> </v-col> </v-row> </v-container> </v-content> </div> </template> <script> export default { data: () => ({}), methods: { logger() { //eslint-disable-next-line console.log("Yes tu as cliqué") } } } </script> <style scoped> .text-field-area { position: relative; bottom: 0; top: 85%; width: 100%; align-items: center; } .chat-area { position: relative; top: 0; bottom: 15%; width: 100%; } </style>Lo que quiero lograr es algo como esto:
Captura de pantalla: https://imgur.com/tovWwaG
Esto es lo que está funcionando para mí:
<v-container fluid style="height: 100vh;" > <v-layout fill-height> ... </v-layout> </v-container>fill-height y, en general, todas las propiedades relacionadas con flexbox dependen estrictamente de las relaciones padre-hijo.
Entonces, cuando inserta un <div> entre el padre y el hijo, dejan de funcionar. Para aprender más sobre cómo funciona flexbox, te recomiendo Una guía completa de flexbox .
En resumen, su diseño:
<v-app> <div v-if="connected"> <Main /> </div> <div v-else> <Login /> </div> </v-app> rompe la relación padre-hijo (entre <v-app> y <Main> ).
Puede deshacerse de los <div> adicionales de dos maneras:
v-if en el contenido: <v-app> <Main v-if="connected" /> <Login v-else /> </v-app><template> . Debido a que solo son envoltorios lógicos, Vue no produce elementos DOM reales para ellos. Esto es particularmente útil cuando tiene varios elementos como contenido y no desea colocar el v-if en cada uno: <v-app> <template v-if="connected"> <Main /> <SomeOtherComponent /> <YetOtherComponent /> </template> <Login v-else /> </v-app> Obviamente, si tiene más de un componente en el v-else , también puede convertirlo en una <template> .
Nota de precaución: debido a que <template> en realidad no produce un elemento DOM, cuando lo usa con v-for , tendrá que :key sus elementos secundarios en lugar de <template> , pero excepto en este caso extremo, es una excelente manera de acoplar componentes de diseño sin tenerlos envueltos en un elemento DOM.
También es útil cuando se trata de relaciones HTML padre/hijo estrictas (es decir: <table> + <tr> + <td> , <ul> + <li> , <ol> + <li> , etc... ).
simplemente establezca la altura de relleno en verdadero, así
<v-container fill-height> </v-container>si no funciona, ponlo en v-content, solo prueba este
<v-content> <v-container fill-height> <v-layout> <v-flex xs12> ... ... </v-flex> </v-layout> </v-container> </v-content>O
<v-content> <v-container class="fill-height" fluid> <v-row justify="center" align="center"> <v-col class="shrink"> ... ... </v-col> </v-row> </v-container> </v-content>