要素 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で行または列をソートする方法

推薦する

JavaScript が Taobao の虫眼鏡効果を模倣

この記事では、淘宝虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

Uniapp は DingTalk スキャンコード ログイン サンプル コードを実装します

UniappにはDingTalk認証ログインがないため、この記事ではDingTalk QRコードログ...

MySQLフィルタリングレプリケーションのアイデアの詳細な説明

目次mysql フィルター レプリケーションメインデータベースに実装ライブラリから実装いくつかの質問...

Vueはローカルストレージの追加、削除、変更機能を実装します

この記事では、ローカルストレージの追加、削除、変更を実装するためのVueの具体的なコードを例として紹...

protobuf の簡単な紹介と Ubuntu 16.04 環境でのインストールチュートリアル

protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...

docker compose サービスの起動順序を制御する方法

まとめDocker-compose は複数の Docker コンテナ サービスを簡単に組み合わせるこ...

MySQL Community Server 5.7.19 インストール ガイド (詳細)

MySQL公式サイトのzipファイルのダウンロードリンク https://dev.mysql.co...

Vueはドラッグ可能なツリー構造図を実装します

目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...

MySQLテーブルをコピーする方法

目次1.mysqlダンプ実行プロセス:特徴2. CSVファイルをエクスポートする(最も柔軟性が高い)...

divコンテナ内の背景色または画像は、サイズが大きくなるにつれて大きくなります。

コードをコピーコードは次のとおりです。高さ:自動 !重要;高さ:550px;最小高さ:550px; ...

MySQLアカウントのIP制限条件を変更する方法

序文最近、仕事で、MySQL ユーザーの権限を変更するには、特定の IP アドレスへのアクセスを制限...

MySQL5.7 マスタースレーブ構成例の分析

MySQL5.7マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...

MySQLクエリ速度が遅く、パフォーマンスが低下する原因と解決策

1. データベースクエリの速度に影響を与えるものは何ですか? 1.1 データベースクエリ速度に影響を...

MySQLデータベーステーブルの定期バックアップの実装の詳細な説明

Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...

MySQL 学習データベースバックアップの詳細な説明

目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...