代码之家  ›  专栏  ›  技术社区  ›  Felix

更改vuetify v-field标签字体大小

  •  0
  • Felix  · 技术社区  · 5 月前

    我试图自定义v-text-field标签的字体大小。我遇到的问题是,当单击字段时,标签通常会转换到字段的顶部并变小,但在我的情况下,在转换完成后,它的大小会再次设置为定义的值。您可以在此处看到过渡结束时文本是如何“弹出”的: https://play.vuetifyjs.com/#eNpdj8tOwzAQRX/l4k1AIg1sS4rEdxAWJp0gS7Zj2ZOoNMq/149Uaruxfa9GZ46/FxF833w5t5snEnvRMhmnJdNnZ4F2rqVz+ZlDP1qWypLfqlwynbgeFOkj5tqMR9KHTpjw1wlo+ZuTlDKm5gpqHkmpKYva5kYgxtB75RiBeCoeyrjRMxZ4GrBi8KNBFd2rNA5EbmDE7TikieeqeknQgtmQ/K/L93Z38jFl33jnoiQsRXqIwnVQZ9rj/c2d8FREpOWPNLDmLRtZrK920jofPxeSQHc2

    有人知道我如何防止这种情况发生吗?

    1 回复  |  直到 5 月前
        1
  •  1
  •   Yue JIN    5 月前

    您的规则将覆盖标签和浮动标签的字体大小。在这里,我们可以通过以下方式单独设置它们的字体大小:

      /* label before click */
      .v-text-field .v-label.v-field-label:not(.v-field-label--floating) {
        font-size: 10px !important;
      }
      /* floating label (after click) */
      .v-label.v-field-label--floating {
        font-size: 7.5px;
      }
    

    Playground

    未聚焦标签的默认大小为 1rem 浮动标签是 0.75rem ,因此在上面的示例中,我将浮动标签的字体大小设置为 7.5px