Migration de Vuetify 2 vers 3 : remplacez les styles supprimés .v-application/rounded/flat

Question

J'essaie de passer de Vuetify/Vue 2 à 3. Je ne suis pas un développeur front-end, je suis juste responsable de la mise à niveau d'un ancien code pour le maintenir fonctionnel. Malheureusement, le guide de migration semble supposer certaines connaissances de base en CSS et ne fournit pas d'exemples sur la façon de réparer tout ce qui a été supprimé.

J'essaie de comprendre comment migrer arrondi et flat dans l'extrait de code suivant :

<v-select
        class="mr-2 filtre-entrée-personnalisée"
        slot = "prepend-inner"
        v-model="champ"
        :items="champs"
        menu-props="auto"
        label="Champ"
        cacher les détails
        une seule ligne
        densité = "compact"
        arrondi
        plat
        theme="sombre"
      /></pré>
<p>et <code>.v-application</code> (si nécessaire) dans cet extrait de code : </p>
<pre class="brush:php;toolbar:false;"><style lang="scss" scoped>
.v-application--is-ltr .v-list-item__icon:premier-enfant,
.v-application--is-ltr .mr {
  marge droite : 10 px ;
}
</style>

Malheureusement, la seule suggestion à ce sujet dans le guide de migration est :

L'attribut
• rounded a été supprimé. Veuillez appliquer la classe CSS aux coins arrondis à l'élément de contenu du menu. Par exemple : .rounded-te
• Les styles globaux précédemment inclus sous les noms .v-application p ou .v-application ul ne sont plus inclus. Si vous devez ajouter une marge à p, ou ajouter un remplissage gauche à ul et ol, ajoutez-le dans la configuration manuelle du composant racine. dans la balise

Answer 1

Vous pouvez toujours utiliser rounded 和 flat, ils viennent d'être déplacés vers le composant VField sous-jacent.

Je pense que votre sélection v2 se retrouvera sans aucun frame, auquel cas rounded 不会有任何可见效果。在 v3 中添加 variant="solo" 和 flat pour obtenir le même effet (voir playground)

---

Quant à v-application--is-ltr 类，它在 V3 中被称为 v-locale--is-ltr.

Si vous en avez toujours besoin, cela dépend de votre application, ce sont des règles personnalisées. Vérifiez si un personnalisé est utilisé mr 类，以及列表中第一个图标的边距是什么样的（我认为现在通过 prepend slot 设置列表图标，所以类应该是 .v-list-item__prepend .v-icon)