So verwenden Sie das Datums-Plugin vue-bootstrap-datetimepicker in vue-cli 3

Nachfragehintergrund

In letzter Zeit plane ich, Vue zu verwenden und es mit dem Front-End-Engineering-System zu kombinieren, um eine vorherige Demo zu rekonstruieren. Eine der Funktionen besteht darin, das Bootstrap-Datepicker-Plug-In zu verwenden, um das Abfragedatum auszuwählen. Ich habe im Internet ein Datepicker-Plugin basierend auf der Vue-Erweiterung gefunden: vue-bootstrap-datepicker. In diesem Blog wird hauptsächlich die Verwendung des Plug-Ins in mit Vue-CLI 3 erstellten Projekten vorgestellt. Projektadresse: https://gitlab.com/JiaoXN/vuecli3usedatetimepicker.git

Installieren Sie das Plugin und seine Abhängigkeiten

Dieses Plugin hat zwei Versionen: eine basiert auf Bootstrap 3.x, die andere auf Basis von Bootstrap 4.x. In diesem Blog werden die Installation und Verwendung des letztgenannten Plug-Ins vorgestellt.

Zuerst müssen Sie die Plugin-Abhängigkeiten installieren, einschließlich Bootstrap 4.x, jquery >= 1.8.3, moment.js 2.22 und pc-bootstrap4-datetimepicker.

• Installieren Sie Bootstrap

npm installiere [email protected] --save-dev

• Installieren Sie jQuery

npm installiere [email protected] --save-dev

• Moment der Installation

npm installiere [email protected] --save-dev

• Installieren Sie pc-bootstrap4-datetimepicker

npm installiere [email protected] --save-dev

Oder legen Sie package.json direkt fest und installieren Sie es über npm install. Die package.json-Konfiguration sieht wie folgt aus:

...
"devAbhängigkeiten": {
	"pc-bootstrap4-datetimepicker": "^4.17.50",
	"Moment": "^2.22.2",
	"jquery": "^3.3.1",
	"Bootstrap": "4.0.0"
}

Installieren Sie dann vue-bootstrap-datetimepicker. Die Installationsmethode ist dieselbe wie bei der obigen Abhängigkeitsinstallation.

Plugin-Konfiguration

Da die ursprüngliche Version des Plug-Ins vue-bootstrap-datetimepicker auf Basis von Bootstrap 3.x entwickelt wurde, wurde es später erweitert, um es an Bootstrap 4.x anzupassen (zu diesem Zeitpunkt kann pc-bootstrap4-datetimepicker als Patch für Bootstrap 4.x angesehen werden). Wenn Sie dieses Plug-In jedoch direkt verwenden, werden die Standardsymbole (ähnlich wie Zeitsymbole oder Datumssymbole) nicht angezeigt, sodass die folgende Konfiguration erforderlich ist.

Der Grund für das obige Problem ist, dass Bootstrap 4.x das Glyphicon-Symbol löscht. Sie müssen daher zuerst das Fortawesome-Plug-In installieren. Die Installationsmethode ist wie folgt:

npm installiere @fortawesome/[email protected] --save-dev

Verwenden Sie dann die folgende Codekonfiguration in der Vue-Datei, die das Datetimepicker-Plugin verwendet:

<Skript>

importiere '@fortawesome/fontawesome-free/css/all.css'

importiere $ aus 'jquery'

Standard exportieren {
	...
	erstellt: function() {
		Symbole:
			Zeit: 'Far Fa-Clock',
	    Datum: 'Far Fa-Kalender',
	    nach oben: 'fas fa-Pfeil-nach-oben',
	    nach unten: 'fas fa-Pfeil-nach-unten',
	    vorherige: 'fas fa-chevron-left',
	    weiter: 'fas fa-chevron-right',
	    heute: 'fas fa-kalender-check',
	    klar: 'far fa-trash-alt',
	    schließen: 'weit fa-times-circle'
		}
	}
}

</Skript

Die erstellte Funktion im obigen Code gehört zu einer Hook-Funktion im Vue-Lebenszyklus

Plugin-Nutzung

Installieren Sie zugehörige abhängige Plug-Ins und konfigurieren Sie Plug-In-Images. Dann können Sie dieses Plug-In verwenden. Der gesamte Vue-Code lautet wie folgt:

<Vorlage>
	<div Klasse="Container">
		<div Klasse="Zeile>
			<div Klasse="col-md-12">
				<Datumsauswahl
					v-Modell="Datum"
					:config="Optionen"
					@dp-hide="showDatePickResult"/>
			</div>
		</div>
	</div>
</Vorlage>

<Skript>
importiere 'bootstrap/dist/css/bootstrap.css'

importiere datePicker aus „vue-bootstrap-datetimepicker“

importiere 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css'

importiere '@fortawesome/fontawesome-free/css/all.css'

importiere $ aus 'jquery'

Standard exportieren {
	Name: "Hallo Welt",
	Daten () {
		zurückkehren {
			Datum: neues Datum(),
			Optionen:
				Format: 'JJJJ-MM-TT HH:mm:ss',
				useCurrent: false,
				Gebietsschema: „zh-cn“,
				Tooltips:
				 Zeit auswählen: ''
				}
			}
		}
	},
	Methoden: {
		showDatePickResult: Funktion () {
			console.log(dieses.Datum)
		}
	},
	Komponenten:
		Datumsauswahl
	},
	erstellt: Funktion () {
		$.extend(true, $.fn.datetimepicker.defaults, {
	 		Symbole:
	  		Zeit: 'Far Fa-Clock',
	  		Datum: 'Far Fa-Kalender',
	  		nach oben: 'fas fa-Pfeil-nach-oben',
	  		nach unten: 'fas fa-Pfeil-nach-unten',
	  		vorherige: 'fas fa-chevron-left',
	  		weiter: 'fas fa-chevron-right',
	  		heute: 'fas fa-kalender-check',
	  		klar: 'far fa-trash-alt',
	  		schließen: 'weit fa-times-circle'
	 		}
		})
	}
}
</Skript>

Es ist nicht nötig, den Inhalt von <template></template> näher zu erläutern. Wer Vue kennt, wird ihn im Grunde kennen. Wenn Sie nicht viel über Vue wissen, können Sie die offizielle Website von Vue besuchen.

Die Optionen in den Daten sind die Konfigurationen des Datetimepicker-Plugins. Die Gesamtkonfiguration finden Sie unter diesem Link. Die aktuelle Konfiguration wird wie folgt beschrieben:

• Format: Datumsformat. Beachten Sie, dass wenn Sie HH in HH:mm:ss durch hh ersetzen, das Plugin das Datum in AM und PM beschreibt.
• locale: gibt die verwendete Sprache an, zh-cn steht für vereinfachtes Chinesisch
• Tooltips: Gibt den Tooltip-Inhalt an. Dieses Plugin hat einen Fehler. Die Tooltips zur Auswahl von Datum und Uhrzeit lauten beide „Uhrzeit auswählen“, daher ist dieser Tooltip leer.

Oben finden Sie Einzelheiten zur Verwendung des Datums-Plugins „vue-bootstrap-datetimepicker“ in vue-cli 3. Weitere Informationen zur Verwendung des Datums-Plugins „vue-bootstrap-datetimepicker“ finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!