suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

<p>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. </p> <p>Ich versuche herauszufinden, wie man <code>rounded</code> im folgenden Codeausschnitt migriert: </p> <pre class="brush:php;toolbar:false;"><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" /></pre> <p>und <code>.v-application</code> (falls erforderlich) in diesem Codeausschnitt: </p> <pre class="brush:php;toolbar:false;"><style lang="scss" .v-application--is-ltr .v-list-item__icon:first-child, .v-application--is-ltr .mr { Rand rechts: 10px; } </style></pre> <p>Leider ist der einzige Vorschlag dafür im Migrationsleitfaden: </p> <ul> Das Attribut <li><code>rounded</code> wurde entfernt. Bitte wenden Sie die CSS-Klasse „Abgerundete Ecken“ auf das Menüinhaltselement an. Zum Beispiel: <code>.rounded-te</code></li> <li>Globale Stile, die zuvor als <code>.v-application p</code> oder <code>.v-application ul</code> enthalten waren, sind nicht mehr enthalten. Wenn Sie einen Rand zu <code>p</code> oder einen linken Abstand zu <code>ul</code> und <code>ol</code> hinzufügen müssen, fügen Sie dies in der manuellen Einstellung der Stammkomponente hinzu im <code><style></code>-Tag. </li> </ul> <p>Die oben stehende Anleitung zu <code>rounded</code> ersetzt einfach <code>rounded-te</code> in einer anderen Art der Steuerung erwähnt). </p> <p>Es heißt, dass flat aus einigen anderen Steuerelementen entfernt und durch das „Single-Variant-Attribut“ ersetzt wurde, aber versucht wird, <code>flat< durch <code>variant="flat"</code> zu ersetzen. /code> gibt mir einen Syntaxfehler.</p> <p>Vielen Dank! </p> <p>(Ich habe diese Frage ursprünglich hier gestellt und jemand hat vorgeschlagen, sie in mehrere Fragen aufzuteilen)</p>
P粉258083432P粉258083432456 Tage vor634

Antworte allen(1)Ich werde antworten

  • P粉561323975

    P粉5613239752023-09-02 21:54:46

    你仍然可以使用 roundedflat,它们只是移动到了底层的 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

    Antwort
    0
  • StornierenAntwort