需要背景最近、Vue を使用してフロントエンド エンジニアリング システムと組み合わせ、以前のデモを再構築する予定です。機能の 1 つは、bootstrap datepicker プラグインを使用してクエリの日付を選択することです。インターネット上で、Vue 拡張機能に基づく日付ピッカー プラグイン vue-bootstrap-datepicker を見つけました。このブログでは主に、vue-cli 3 で作成されたプロジェクトでプラグインを使用する方法を紹介します。プロジェクトアドレス: https://gitlab.com/JiaoXN/vuecli3usedatetimepicker.git プラグインとその依存関係をインストールするこのプラグインには 2 つのバージョンがあります。1 つは bootstrap 3.x に基づいて開発され、もう 1 つは bootstrap 4.x に基づいて開発されています。このブログでは後者のプラグインのインストールと使い方を紹介します。 まず、bootstrap 4.x、jquery >= 1.8.3、moment.js 2.22、pc-bootstrap4-datetimepicker などのプラグインの依存関係をインストールする必要があります。
npm インストール [email protected] --save-dev
npm をインストール [email protected] --save-dev
npm インストール [email protected] --save-dev
npm インストール [email protected] --save-dev または、package.json を直接設定し、npm install 経由でインストールします。 package.json の構成は次のとおりです。 ... 「devDependencies」: { "pc-bootstrap4-datetimepicker": "^4.17.50", 「瞬間」: 「^2.22.2」、 "jQuery": "^3.3.1", "ブートストラップ": "4.0.0" } 次にvue-bootstrap-datetimepickerをインストールします。インストール方法は上記の依存関係のインストールと同じです。 プラグインの設定vue-bootstrap-datetimepicker プラグインのオリジナル版は Bootstrap 3.x をベースに開発されたため、その後 Bootstrap 4.x に適応するように拡張されました (現時点では、pc-bootstrap4-datetimepicker は Bootstrap 4.x 用のパッチと見ることができます)。ただし、このプラグインをそのまま使用すると、デフォルトのアイコン (時間アイコンや日付アイコンのようなもの) が表示されないため、以下の設定が必要です。 上記の問題の原因は、Bootstrap 4.x が glyphicon アイコンを削除するため、まず fortawesome プラグインをインストールする必要があります。インストール方法は次のとおりです。 npm をインストール @fortawesome/[email protected] --save-dev 次に、datetimepicker プラグインを使用する Vue ファイルで次のコード構成を使用します。 <スクリプト> '@fortawesome/fontawesome-free/css/all.css' をインポートします。 'jquery' から $ をインポートします エクスポートデフォルト{ ... 作成: 関数() { アイコン: 時間: 「ファーファクロック」、 日付: 'far fa-calendar'、 上: 'fas fa-arrow-up'、 下: 'fas fa-arrow-down'、 前: 'fas fa-chevron-left'、 次: 'fas fa-chevron-right'、 今日: 'fas fa-calendar-check'、 クリア: 'far fa-trash-alt'、 閉じる: 'far fa-times-circle' } } } </スクリプト 上記のコードで作成された関数は、Vueライフサイクルのフック関数に属します。 プラグインの使用関連する依存プラグインをインストールし、プラグインイメージを設定します。その後、このプラグインを使用できます。Vue コード全体は次のとおりです。 <テンプレート> <div class="コンテナ"> <div class="行> <div class="col-md-12"> <日付ピッカー v-model="日付" :config="オプション" @dp-hide="日付選択結果を表示"/> </div> </div> </div> </テンプレート> <スクリプト> 'bootstrap/dist/css/bootstrap.css' をインポートします。 'vue-bootstrap-datetimepicker' から datePicker をインポートします。 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css' をインポートします。 '@fortawesome/fontawesome-free/css/all.css' をインポートします。 'jquery' から $ をインポートします エクスポートデフォルト{ 名前: 'HelloWorld', データ () { 戻る { 日付: 新しい Date(), オプション: 形式: 'YYYY-MM-DD HH:mm:ss', useCurrent: false、 ロケール: 'zh-cn', ツールチップ: 選択時間: '' } } } }, メソッド: { showDatePickResult: 関数 () { コンソールログ(この日付) } }, コンポーネント: 日付ピッカー }, 作成: 関数 () { $.extend(true, $.fn.datetimepicker.defaults, { アイコン: 時間: 「ファーファクロック」、 日付: 'far fa-calendar'、 上: 'fas fa-arrow-up'、 下: 'fas fa-arrow-down'、 前: 'fas fa-chevron-left'、 次: 'fas fa-chevron-right'、 今日: 'fas fa-calendar-check'、 クリア: 'far fa-trash-alt'、 閉じる: 'far fa-times-circle' } }) } } </スクリプト> <template></template> 内の内容については詳しく説明する必要はありません。Vue を知っている人なら基本的に知っているでしょう。Vue についてあまり知らない場合は、Vue の公式サイトを確認してください。 データ内のオプションは datetimepicker プラグインの設定です。全体的な設定については、このリンクを参照してください。現在の設定は次のとおりです。
上記は、vue-cli 3 で vue-bootstrap-datetimepicker 日付プラグインを使用する方法の詳細です。vue-bootstrap-datetimepicker 日付プラグインの使用方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Ubuntu 18.04 に opencv 3.2.0 をインストールするためのソリューション
画像をダウンロードMySQLイメージの選択 docker 検索 mysql MySQL 5.7 イメ...
複数のTomcatをインストールする場合は、システムにJDKがインストールされている必要があり、 T...
Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...
目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....
この記事では、フィルターを使用して日付をフォーマットするVueの具体的なコードを参考までに紹介します...
崇高なSublime Text はコード エディター (Sublime Text2 は有料ソフトウェ...
目次マクスウェルについてMaxwellの設定と使用1. Maxwellインストールパッケージをダウン...
最近、ネイティブ JS を使用して、さらにいくつかの小さな機能を実装したいと思っています。現在、ブロ...
目次マップ状態マップゲッターマップミューテーションマップアクション複数のモジュールマップ状態 ...
この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...
目次1. 基本原則2. 特定のコード要約する1. 基本原則まず、生放送エリアを10の部分に分割し(個...
コアはmysqldumpとランタイムです操作は実際にはそれほど難しくありません。バックアップ操作を実...
今日は、サイトの設定やウェブサイトのアップロードなど、FlashFXP の最も基本的な機能を紹介しま...
VMwareaのインストールプロセスは説明しませんが、主にwin7イメージをロードする方法を説明しま...
この記事では主に CentOS 上で MySQL マスタースレーブサーバーを構築する方法を紹介します...