要素 DateTimePicker+vue ポップアップボックスに時間のみが表示される問題を解決する

3つの知識ポイント:

1. CSS子孫セレクター

https://www.w3school.com.cn/css/css_selector_descendant.asp

2.vue ディープセレクター

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

3.要素ui DateTimePickerはドロップダウンボックスのクラス名popper-classを指定します

https://element.eleme.cn/#/zh-CN/component/datetime-picker

上記の 3 つの知識ポイントを理解した上で、vue ページのグローバル スタイル (つまり、スコープ マークのないスタイル タグ) では、css 子孫セレクター + vue ディープ セレクターを使用して、制御対象の要素 ui コンポーネント内のスタイルをロックし、外部スタイル クラス名を使用して、制御対象の要素 ui コンポーネントの内部スタイルを制約することで、すべてのグローバル要素 ui コンポーネントが汚染されないようにすることができます。

ただし、DateTimePicker は特殊です。ポップアップ ボックスの DOM は現在の Vue ファイル内のどのタグにも属していないため、CSS 子孫セレクター + Vue ディープ セレクターを使用して、現在のページでカスタマイズする DateTimePicker のポップアップ ボックス部分をロックすることはできません。 DateTimePicker の公式ドキュメントを参照すると、ドロップダウン ボックスのクラス名を指定するために popper-class を使用できることがわかりました。このように、指定されたクラス名 + vue ディープセレクターを使用して、グローバルスタイルでカスタマイズする必要がある DateTimePicker のポップアップボックス部分を一意に書き換えることができます。

<テンプレート>
 <div class="アプリコンテナ">
 
     <el-日付ピッカー
      v-model="..."
      タイプ="日付/時刻範囲"
      align="right"
      範囲区切り文字="to"
      start-placeholder="開始時刻"
      end-placeholder="終了時刻"
      フォーマット="yyyy-MM-dd HH"
      値の形式="yyyy-MM-dd HH"
      ポッパークラス="tpc"
     </el-date-picker>
 
  </div>
</テンプレート>
<style lang="scss" スコープ>
...
</スタイル>
 
<スタイル>
.tpc /deep/ .el-time-spinner__wrapper {
 幅:100% !重要;
}
.tpc /deep/ .el-scrollbar:nth-of-type(2) {
 表示: なし !重要;
}
</スタイル>

要素 DateTimePicker+vue ポップアップ ボックスが時間のみを表示する問題の解決に関するこの記事はこれで終わりです。要素 DateTimePicker ポップアップ ボックスの関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。