書き換えられたタイトルは次のとおりです: Vuetify の ::v-deep .v-autocomplete__content.v-menu__content は Vue のスタイル スコープでは機能しません

Question

プロジェクトリストを展開できる v-autocomplete (vuetify) を持っています

オートコンプリートをクリックしてアイテムのリストに表示されるものを入力すると、下の画像に示すように、アイテムが入っているコンテナーが希望の場所にありません (次の例を使用しました)。独自のメニューを表示します。問題が発生しているシステムの画像を追加できるため)

devTools の .v-autocomplete__content.v-menu__content クラスを選択すると、必要に応じてオートコンプリートを配置できます (たとえば、マージン左を適用するなど)。

このスタイルをこのページに追加したいだけなので、スコープ付きスタイル内で v-autocomplete__content クラスを渡そうとすると問題が発生し始めます。 そのページの他のスタイルですでに使用されているため、::v-deep と >>> を使用しようとしましたが、機能しません。

以下は、理解を助けるために devTools を使用して選択されたフィールドの図でもあります。 私の本当の質問は、範囲内のスタイルを使用しようとしているだけですが、希望どおりに編集するためのヒントや他の代替手段を持っている人はいますか? Vuejsを使っています。

どんな助けでも歓迎します:)

リーリー

>>> モードで ::v-deep を使用し、::v-deep なしで .v-autocomplete__content.v-menu__content クラスを渡してみました

Answer 1

DOM 内の v-autocomplete__content div の場所を見ると、コンポーネント内ではなくルート v-app コンポーネントにアタッチされていることがわかります。 。この機能を変更するために、Vuetify は attach 属性を提供します。この属性では、v-autocomplete を指定して、必要な要素 (コンポーネント ルートなど) にそれ自体をアタッチできます。これにより、スコープ付きスタイルが v-autocomplete

に到達できるようになります。 リーリー