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

要素 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • クリックしてポップアップボックスを表示するVueの例
  • Vueはシンプルなログインポップアップボックスを実装します
  • Vueコンポーネント開発におけるユニバーサルポップアップボックスの実装
  • Vue ポップアップ ボックス コンポーネントのカプセル化のサンプル コード
  • Vueを使用してさまざまなポップアップボックスコンポーネントを実装する
  • ElementUI vue this.$confirm と el-dialog ポップアップ ボックスのモバイル サンプル デモ
  • Vueコンポーネントはポップアップボックスのクリックによる表示と非表示の効果を実現します
  • Vue でポップアップ ボックス コンポーネントを作成する方法の詳細説明
  • Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド

<<:  MySQL ログの設定と表示方法

>>:  MySQLで行または列をソートする方法

推薦する

MySQL REVOKE でユーザー権限を削除する

MySQL では、REVOKE ステートメントを使用してユーザーの特定の権限を削除できます (ユーザ...

VirtualBox の仮想ディスク vdi ファイルの容量を拡張する方法 (グラフィック チュートリアル)

VirtualBoxのインストールディレクトリを見つけます。ディレクトリ内には容量を拡張するために...

背景画像の配置におけるbackground-position属性の自己理解

最近、プロジェクトではラベルやボタンなどの断片的な画像をたくさん使用する必要があります。また、CSS...

Windows7 での Mysql5.7 my.ini ファイルの読み込みパスとデータの場所の変更方法

更新: MySQL の公式 Web サイトにアクセスして MySQL インストーラーをインストールし...

Vue の計算プロパティの詳細な説明

目次補間式方法計算された要約する今日は、Vue の計算プロパティについてお話ししましょう。計算プロパ...

MySql における無効な Null セグメント判定と IFNULL() 失敗の解決策

MySql Nullフィールド判定とIFNULL失敗処理ps: (プロセスを表示したくない場合は、S...

Mysql 5.7.19 無料インストール バージョンで遭遇した落とし穴 (コレクション)

1. 公式ウェブサイトから 64 ビットの zip ファイルをダウンロードします。 2. インスト...

LinuxカーネルマクロContainer_Ofの詳細な説明

目次1. 構造体はメモリにどのように保存されますか? 2. container_ofマクロ3. 型4...

Reactでパスワード強度検出器を実装する方法

目次序文使用コンポーネントの記述データ構造分析プロセス分析基礎コードの分析他の要約する序文パスワード...

Docker コンテナにデプロイされた Django のタイムゾーンの問題

目次Django でのタイムゾーン設定USE_TZ=真USE_TZ=偽Linux コンテナでのタイム...

Vue における v-for のキーの一意性の詳細な説明

目次1. DOM の違い2. 同じレイヤーの同じタイプの要素にキー属性を追加する3. キーはインデッ...

固定テーブル幅テーブルレイアウト: 固定

テーブルを画面全体(残りの空白領域)に表示するために、幅属性は 100% と定義されることが多く、セ...

XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML 見出しの概要Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトル...

MySQL 百万レベルのデータページングクエリ最適化ソリューション

データベースからクエリする必要があるテーブルに数万件のレコードがある場合、すべての結果を一度にクエリ...