我在我最新的專案 Nuxt.js 中使用了 vuetify.js 作為 UI 框架。在 v-text-field 組件中，我嘗試使用反向標記來移動文本右對齊。但我沒有將標簽從左對齊移動到右對齊。我使用了反向，標簽會自動移動到右對齊。
所以，我試著像下面那樣修復。在模板↓
<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>
但結果如下↓
我想將邊框空間固定到標簽位置。請問有人給我建議嗎？
uj5u.com熱心網友回復：
如果您需要使用reverse（出于其他原因），可以使用以下樣式重新定位標簽：
分別覆寫to和的
left和right位置。.v-label0auto在邊框上看到的間隙是用一個
<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>
演示 1
另一方面，如果您不需要reverse，則可以避免標簽的自定義定位，并將input的方向更改為rtl：
<style lang="scss" scoped>
div ::v-deep .v-input__slot input {
direction: rtl;
}
</style>
演示 2
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/381424.html
標籤：Vue.js 蠢货 nuxt.js Vuetify.js
上一篇：Vue：如何在一個函式陣列中相應地使用異步等待，其中可以為Promise.all提供兩個函式？
下一篇：缺少型別的屬性（打字稿）