0
1.5K
Vistas¿Cómo alinear la etiqueta del campo de texto v usando la etiqueta inversa en Vuetify.js?
He usado vuetify.js como marco de interfaz de usuario en Nuxt.js, mi último proyecto. En el componente v-text-field, traté de usar la etiqueta inversa para mover el texto alineado a la derecha. Pero no moví la etiqueta de alinear a la izquierda para alinear a la derecha. Usé el reverso, la etiqueta se movió automáticamente para alinearla a la derecha.
Entonces, traté de arreglar como a continuación. en plantilla↓
<v-text-field class="label-left" reverse label="TOTAL" persistent-placeholder dense outlined v-model="totalCost" ></v-text-field>y agrega estilo↓
<style lang="scss" scoped> div ::v-deep .v-label.v-label--active.theme--light { left: 0 !important; transform-origin: top left !important; position: absolute !important; } </style> pero el resultado fue como el siguiente↓ 
Quiero arreglar el espacio del borde a la posición de la etiqueta. ¿Alguien me aconseja, por favor?
1 Respuestas
Responde la pregunta0
Si necesita usar reverse (por alguna otra razón), es posible reposicionar la etiqueta con los siguientes estilos:
Anule la posición
leftyrightde la.v-labela0yauto, respectivamente.El espacio que se ve en el borde se implementa con un elemento
<legend>. Anule suwidth(que se calcula dinámicamente en tiempo de ejecución) conauto(puede necesitar un ajuste de ancho específico basado en el ancho real de la etiqueta); y establezca sumargin-leften10px.
<style lang="scss" scoped> 1️⃣ div ::v-deep .v-label.v-label--active.theme--light { left: 0 !important; right: auto !important; } 2️⃣ div ::v-deep .v-input__slot fieldset legend { margin-left: 10px !important; width: auto; } </style> Por otro lado, si no necesita reverse , puede evitar el posicionamiento personalizado de la etiqueta y cambiar la dirección de input a rtl :
<style lang="scss" scoped> div ::v-deep .v-input__slot input { direction: rtl; } </style>