如何对齐左反转的 v-text-field 标签

Posted 2023-02-16

技术标签:

【中文标题】如何对齐左反转的 v-text-field 标签【英文标题】：How to align left reversed v-text-field label 【发布时间】：2020-09-28 05:03:57 【问题描述】：

v-text-field 的reverse 属性可以使其文本右对齐。

但我想保留标签，所以我需要一种控制标签位置的方法。

我该怎么做？

<v-text-field reverse label="number input" append-icon="mdi-magnify" type="number"></v-text-field>

【问题讨论】：

【参考方案1】：

您可以创建一个 CSS 类以应用于以标签为目标并覆盖定位的文本输入。

.label-left

.label-left .v-label 
  left: 0 !important;
  transform-origin: top left !important;

现在您可以将 label-left 类应用于反向输入。

<v-text-field
  class="label-left"
  reverse
  label="number input"
  append-icon="mdi-magnify"
  type="number"
></v-text-field>

【讨论】：

以上是关于如何对齐左反转的 v-text-field 标签的主要内容，如果未能解决你的问题，请参考以下文章