Le titre réécrit est : : v-deep .v-autocomplete__content.v-menu__content dans Vuetify ne fonctionne pas dans la portée de style de Vue

Question

J'ai un v-autocomplete (vuetify) qui peut élargir la liste des projets

Lorsque je clique sur la saisie semi-automatique pour saisir ce qui est disponible dans la liste des éléments, le conteneur dans lequel se trouvent les éléments n'est pas là où je veux qu'il soit, comme le montre l'image ci-dessous (j'ai utilisé l'exemple suivant) vuetify son propre menu car il je peux ajouter ce que j'ai rencontré à l'image du système en question)

En sélectionnant la classe .v-autocomplete__content.v-menu__content de devTools, je peux positionner la saisie semi-automatique selon les besoins, par exemple en y appliquant une marge gauche.

Mes problèmes commencent à se produire lorsque j'essaie de passer la classe v-autocomplete__content dans un style étendu, car je souhaite uniquement ajouter ce style sur cette page. J'ai essayé d'utiliser ::v-deep et même >>> car il est déjà utilisé dans d'autres styles sur cette page, mais cela ne fonctionne pas.

Vous trouverez également ci-dessous une image des champs sélectionnés à l'aide de devTools pour une meilleure compréhension. Ma vraie question est simplement d'essayer d'utiliser des styles dans une plage, est-ce que quelqu'un a des conseils ou d'autres alternatives pour modifier comme je le souhaite ? J'utilise Vuejs.

Toute aide est la bienvenue :)

::v-deep .v-autocomplete__content { border: 2px solid red !important; }

J'ai essayé d'utiliser ::v-deep avec les modes >>> et même de passer la classe .v-autocomplete__content.v-menu__content sans ::v-deep

Answer 1

Si vous regardez dans le DOM v-autocomplete__content div 的位置，您会发现它附加到您的根 v-app du composant, pas à l'intérieur du composant. Pour modifier cette fonctionnalité, Vuetify vous fournit l'attribut attach où vous pouvez spécifier v-autocomplete pour s'attacher à n'importe quel élément de votre choix (par exemple la racine de votre composant). Cela permettra aux styles étendus d'atteindre votre v-autocomplete

<v-container fluid id="auto-complete-container">
  <v-row align="center">
    <v-col cols="4">
      <v-autocomplete
        v-model="value"
        :items="items"
        attach="#auto-complete-container"
      ></v-autocomplete>
    </v-col>
  </v-row>
</v-container>