如何在 Vuetify.js 中使用反向标签对齐 v-text-field 标签？

Question

我在 Nuxt.js 我的最新项目中使用 vuetify.js 作为 UI 框架。在 v-text-field 组件中，我尝试使用 reverse 标签将文本右对齐。但我没有将标签从左对齐移动到右对齐。我用的是reverse，标签自动右对齐

所以，我尝试如下修复。在模板中↓

<v-text-field
  class="label-left"
  reverse
  label="TOTAL"
  persistent-placeholder
  dense
  outlined
  v-model="totalCost"
></v-text-field>

并添加样式↓

<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>

结果如下↓

我想将边框 space 固定到标签位置。有没有人给我建议？

Answer 1

如果您需要使用reverse（出于某些其他原因），可以使用以下样式重新定位标签：

将 .v-label 的 left 和 right 位置分别覆盖为 0 和 auto。
边框上的空隙是用<legend>元素实现的。将其width（运行时动态计算）覆盖为auto（可能需要根据标签的实际宽度调整具体宽度）；并将其 margin-left 设置为 10px.

<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>

demo 1

另一方面，如果您不需要reverse，您可以避免标签的自定义定位，并更改input的方向 rtl:

<style lang="scss" scoped>
div ::v-deep .v-input__slot input {
  direction: rtl;
}
</style>

demo 2

如何在 Vuetify.js 中使用反向标签对齐 v-text-field 标签？

How to align v-text-field label using reverse tag in Vuetify.js?

sass

vue.js

nuxt.js

vuetify.js