Migration von Vuetify 2 auf 3: Ersetzen Sie die entfernten Stile .v-application/rounded/flat

Question

Ich versuche ein Upgrade von Vuetify/Vue 2 auf 3 durchzuführen. Ich bin kein Front-End-Entwickler, sondern nur dafür verantwortlich, alten Code zu aktualisieren, damit er funktionsfähig bleibt. Leider scheint der Migrationsleitfaden einige grundlegende CSS-Kenntnisse vorauszusetzen und enthält keine Beispiele dafür, wie alles, was entfernt wurde, behoben werden kann.

Ich versuche herauszufinden, wie man rounded im folgenden Codeausschnitt migriert:

<v-select
        class="mr-2 filter-custom-input"
        Slot="prepend-inner"
        v-model="Feld"
        :items="Felder"
        menu-props="auto"
        label="Feld"
        Details ausblenden
        einzelne Zeile
        Dichte="kompakt"
        gerundet
        Wohnung
        theme="dunkel"
      />

und .v-application (falls erforderlich) in diesem Codeausschnitt:

<style lang="scss"
.v-application--is-ltr .v-list-item__icon:first-child,
.v-application--is-ltr .mr {
  Rand rechts: 10px;
}
</style>

Leider ist der einzige Vorschlag dafür im Migrationsleitfaden:

Das Attribut
• rounded wurde entfernt. Bitte wenden Sie die CSS-Klasse „Abgerundete Ecken“ auf das Menüinhaltselement an. Zum Beispiel: .rounded-te
• Globale Stile, die zuvor als .v-application p oder .v-application ul enthalten waren, sind nicht mehr enthalten. Wenn Sie einen Rand zu p oder einen linken Abstand zu ul und ol hinzufügen müssen, fügen Sie dies in der manuellen Einstellung der Stammkomponente hinzu im

Answer 1

你仍然可以使用 rounded 和 flat，它们只是移动到了底层的 VField 组件。

我认为你的 v2 select 最终会没有任何框架，这种情况下 rounded 不会有任何可见效果。在 v3 中添加 variant="solo" 和 flat 以获得相同的效果（参见 playground）

---

至于 v-application--is-ltr 类，它在 V3 中被称为 v-locale--is-ltr。

如果你仍然需要它取决于你的应用程序，这些都是自定义规则。检查是否使用了自定义的 mr 类，以及列表中第一个图标的边距是什么样的（我认为现在通过 prepend slot 设置列表图标，所以类应该是 .v-list-item__prepend .v-icon）