需要背景最近、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 をインストールするためのソリューション
ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...
目次CURRENT_TIMESTAMPの使用CURRENT_TIMESTAMPを使用したタイムスタン...
Docker は、次の CentOS バージョンでの実行をサポートしています。 • CentOS 7...
大きなことも小さなことも考えて、方向転換しましょう。 Linux では非常に大きなファイルに遭遇する...
最初のステップは、圧縮されたパッケージを対応するディスクに解凍することです。 2 番目の手順は、cm...
1. 最新のnginx dockerイメージをダウンロードする $ docker pull ngin...
clear:both清除浮動これは私が常に持っていた印象ですが、私はこれをめったに使用せず、私の理...
Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...
まず次のコマンドを実行します: [root@mini61 setuptools-8.2.1]# py...
目次1. Springbootプロジェクトを準備する2. 関連する設定を実行する3.パッケージ4.D...
この記事では、React Native の基本をすでに理解していることを前提とし、ネイティブと Ja...
目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...
目次1. withRouterコンポーネントを使用する2. ルートタグを使用するReactRoute...
目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...
Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...