1: el-select ドロップダウン ボックスのオプションのスタイルを変更する方法 インターネット上には通常 2 つの方法があります: 1.
ドロップダウン ボックスのクラス名を見つけて、グローバル スタイルを記述します。
2. /deep/ を介して .el-select-dropdown__item のスタイル コンテンツを変更します。
3. Popper-class で設定されたクラス名を介してスタイルを追加します。
上記の方法のうち、2 番目と 3 番目の方法は有効ではなく、1 番目の方法は可能ですが、スタイル汚染の原因となり、パッケージをサーバーにアップロードすると、他の場所のスタイルが変更される可能性があります。
2: 問題分析
上の図は、el-select オプションが選択されているときのページの構造を示しています。オプションのコンテナーは、マウントされた div#app 内にありませんが、div#app の兄弟要素です。コンポーネントにスタイルを設定すると、 add スコープ付きではスコープが div#app に限定されるため、設定したスタイルをオプション内容の div に適用できません。
注: el-select コンポーネントでは、デフォルトではオプション コンテナのみが div#app の外部にあり、表示される div.el-input は依然として div#app 内にあります。
3: 問題解決
Popper-append-to-body 属性は、公式の Element-UI ドキュメントで提供される属性です。この属性の目的は、el-select オプションのコンテンツを div#app に移動することです。デフォルト値は true です。次のとおりです。この図は、属性が false に設定されている場合の DOM 構造の表示を示しています。
<div class="検索ツール">
<el-select
v-model="都市"
フィルタリング可能
placeholder="選択してください"
:popper-append-to-body='false'
@change="ハンドル選択"
>
<el-オプション
v-for="都市のアイテム"
:key="アイテム.エリアコード"
:label="アイテム.都市"
:value="アイテム.エリアコード"
></el-オプション>
</el-select>
</div>
4: スタイルの変更
less でコンパイルしたスタイルは、事前にlessとless-loaderをインストールし、設定ファイルに解析コマンドを設定する必要があります。
<style lang="scss" スコープ>
.search-tool {
位置: 絶対;
上: 0.2レム;
左: 5ピクセル;
z インデックス: 1000;
ディスプレイ: フレックス;
整列項目: 中央;
// 背景色: 紺碧;
背景: rgba(21,43,94,0.3);
境界半径: 30px;
}
// オプションが選択されていない場合、プレースホルダー スタイルは重みを増やすために最初に親要素を選択する必要があります。
::v-deep input::-webkit-input-placeholder {
色: #fff;
}
::v-deep input::-moz-input-placeholder {
色: #fff;
}
::v-deep input::-ms-input-placeholder {
色: #fff;
}
// 変更されるのは el-input のスタイルです
//1 つの方法は、最内層 el-input__inner の背景色を設定し、外側の 2 レベルの親要素を透明色に設定することです。
//もう 1 つの方法は、el-select から el-input__inenr までの背景色を必要な色に設定することです
::v-deep .el-select、
::v-deep .el-input、
::v-deep .el-input__inner{
背景:rgba(21,43,94,0.3);
色:#fff;
境界線:0px;
境界半径:0px;
テキスト整列: 中央;
}
// el-input がフォーカスされている場合、外側の境界線にはスタイルが設定されます
::v-deep .el-select .el-input.is-focus .el-input__inner{
境界線:0px;
}
// 変更されるのは el-input の上下にある小さなアイコンの色です
::v-deep .el-select .el-input .el-select__caret{
色:#fff;
}
//オプション全体の最も外側のスタイルを変更します
::v-deep .el-select-dropdown{
背景:rgba(21,43,94,0.3);
マージン: 0px;
境界線:0px;
境界半径: 0px;
左: 0px !重要;
}
// 単一のオプションのスタイルを変更します
::v-deep .el-select-dropdown__item{
背景色: 透明;
色:#fff;
}
//アイテムオプションのホバースタイル
::v-deep .el-select-dropdown__item.hover、
::v-deep .el-select-dropdown__item:hover{
色:rgb(21,43,94);
}
// 変更されるのは、ドロップダウン ボックス オプションのコンテンツの上にある鋭い角です。
::v-deep .el-popper .popper__arrow、.el-popper .popper__arrow::after{
表示: なし。
}
</スタイル>