Der umgeschriebene Titel lautet: ::v-deep .v-autocomplete__content.v-menu__content in Vuetify funktioniert nicht im Stilumfang von Vue

Question

Ich habe eine V-Autovervollständigung (vuetify), die die Projektliste erweitern kann

Wenn ich auf „Automatische Vervollständigung“ klicke, um einzugeben, was in der Liste der Elemente verfügbar ist, befindet sich der Container, in dem sich die Elemente befinden, nicht dort, wo ich sie haben möchte, wie im Bild unten gezeigt (ich habe das folgende Beispiel verwendet). vuetify hat sein eigenes Menü, weil es Ich kann dem Bild des betreffenden Systems hinzufügen, was mir begegnet ist)

Durch Auswahl der Klasse .v-autocomplete__content.v-menu__content von devTools kann ich die automatische Vervollständigung nach Bedarf positionieren, indem ich beispielsweise margin-left darauf anwende.

Meine Probleme treten auf, wenn ich versuche, die Klasse v-autocomplete__content in einem bereichsbezogenen Stil zu übergeben, da ich nur diesen Stil auf dieser Seite hinzufügen möchte. Ich habe versucht, ::v-deep und sogar >>> zu verwenden, da es bereits in einigen anderen Stilen auf dieser Seite verwendet wird, aber es funktioniert nicht.

Unten finden Sie zum besseren Verständnis auch ein Bild der mit devTools ausgewählten Felder. Meine eigentliche Frage ist nur der Versuch, Stile innerhalb eines Bereichs zu verwenden. Hat jemand Tipps oder andere Alternativen, um die Bearbeitung so vorzunehmen, wie ich es möchte? Ich verwende Vuejs.

Jede Hilfe willkommen :)

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

Ich habe versucht, ::v-deep mit den Modi >>> zu verwenden und sogar die Klasse .v-autocomplete__content.v-menu__content ohne ::v-deep zu übergeben

Answer 1

如果您查看 DOM 中 v-autocomplete__content div 的位置，您会发现它附加到您的根 v-app 组件，而不是组件内部。要更改此功能，Vuetify 为您提供了 attach 属性，您可以在其中指定 v-autocomplete 将其自身附加到您想要的任何元素（例如您的组件根）。这将允许作用域样式达到您的 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>