3

Me encuentro trabajando con vuetify, utilizando el siguiente v-dialog en un componente:

<template>
  <div>
    <!--Indicador-->
      <v-dialog class="vdialognew" v-model="mostrarIndicator" persistent>
        <v-content>
          <v-container fluid fill-height>
            <v-layout align-center justify-center>
                <cube-shadow class="spinnerRotate"></cube-shadow>
            </v-layout>
          </v-container>
        </v-content>
      </v-dialog>
    <!-------------->
  </div>
</template>
<style scoped>
.vdialognew {
  box-shadow: none !important;
  max-width: 610px !important;
}
</style>

Como veran en v-dialog he agregado la clase vdialognew, para aplicar esos nuevos estilos, pero al cargar el contenido revisando en la consola del navegador, veo que no le aplica la clase vdialognew, unicamente. De igual forma si utilizo la propiedad style dentro de la etiqueta v-dialog, no me funciona. Como puedo realizar tal cambio.

Dicha modificación la estoy realizando para eliminar el cuadro que se ve atrás del cuadrado verde:

introducir la descripción de la imagen aquí

2 respuestas 2

3

Parece que el uso de content-class tiene conflictos al funcionar con <style scoped> tal como mencionan en el siguiente enlace.

Intenta colocando tu clase en el css global de tu aplicación y usa content-class como en el siguiente ejemplo. También puedes intentar quitar scoped de tu etiqueta style.

2
  • 1
    Muchas gracias, me ha funcionado quitando 'scoped' de la etiqueta 'style' y utilizando content-class.
    – JG_GJ
    Commented el 19 feb. 2019 a las 16:59
  • 1
    +1 Gracias por indagar en el problema, no había tenido en cuenta esto en mi respuesta .
    – Dev. Joel
    Commented el 19 feb. 2019 a las 17:43
2

Según la documentación se puede añadir una clase personalizada con el prop content-class

Ejm

<v-dialog v-model="mostrarIndicator" persistent content-class="vdialognew" >
   .... 

Para este ejemplo se añade el valor para el ancho del dialogo, usando la clase. vdialognew

Vue.component('example-dialog',{

data: function () {
    return {
      mostrarIndicator: true
    }
  },
  template: `<v-app id="inspire"> <v-dialog
       v-model="mostrarIndicator" persistent content-class="vdialognew" 
      >
  
        <v-card>
          <v-card-title
            class="headline grey lighten-2"
            primary-title
          >
            Privacy Policy
          </v-card-title>
  
          <v-card-text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </v-card-text>
  
          <v-divider></v-divider>
  

        </v-card>
      </v-dialog> </v-app>`,
    

});
new Vue({
  el: '#app'

})
.vdialognew {
  box-shadow: none !important;
  max-width: 610px !important;
  width : 2500px !important;
}
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">

<div id="app">
   <example-dialog />
</div>

3
  • Lo he realizado, guiándome con la documentación, pero no aplica el estilo.
    – JG_GJ
    Commented el 18 feb. 2019 a las 17:42
  • @JG_GJ revise el DOM, se añade la clase al dialogo? o qué estilos busca añadir, quizá el error sea de su CSS , debería funcionar, intentaré añadir un ejemplo.
    – Dev. Joel
    Commented el 18 feb. 2019 a las 18:16
  • Revisando el DOM, veo que si aplica la clase, pero al buscar la clase entre los estilos "Pestaña Styles", no aparece la clase con su propiedades y pues al final no aplica los estilos.
    – JG_GJ
    Commented el 18 feb. 2019 a las 18:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.