Yo uso v-text-field, y v-select, con vue-loader.
Traté de cambiar el tamaño de fuente, pero no pude. ¿Cómo cambio el tamaño de fuente?

A mi código le gusta esto.

<template lang="pug">
p label-1
v-text-field(...)

p label-1
v-text-field(...)
</template>

<stylelang="sass">
.input-group .input-group__input
  font-size: 12px !important
</style>

<stylelang="sass"scoped>
.p
  font-size: 12px
</style>

captura de pantalla de la herramienta de desarrollador

10
tomlla 27 oct. 2017 a las 07:32

3 respuestas

La mejor respuesta

Establece la familia de fuentes en el cuerpo. Si está importando la entrada del lápiz Vuetify, main.styl sobrescribe la variable $ font-family.

2
Nisal Edu 27 oct. 2017 a las 04:58

Para cambiar el tamaño de fuente para un solo componente, como un text field, en toda la aplicación:

<style>
  .v-text-field input {
    font-size: 1.2em;
  }
</style>

Para cambiar el tamaño de fuente dentro de otro componente, use un estilo de ámbito:

<style scoped>
  .v-text-field input {
    font-size: 1.2em;
  }
</style>

Para un enfoque más genérico, también puede apuntar a múltiples tipos de componentes usando .v-input

.v-input {
    font-size: 1.2em;
}

O

.v-input input {
    font-size: 1.2em;
}

Finalmente, también puede apuntar a las etiquetas también.

.v-input .v-label {
    font-size: 1.2em;
}
12
Steven Spungin 5 oct. 2018 a las 11:56

O puede crear una clase div y señalar esto.

<style lang="stylus" scoped>
  .element
    color white    
    padding 0
    margin 0
    font-size 150%
</style>

.element
      | 一共 : {{ sum("quantity") }} ,....
1
Raju yourPepe 29 oct. 2017 a las 07:50