So implementieren Sie einen Kalender mithilfe von Vue-Komponenten (ausführliches Tutorial)

Komponenten sind ein Muss beim Erlernen von Vue. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zum Vue-Komponenten-Tutorial ein, um einen schönen Kalender zu implementieren Sehr nützlich für alle, die lernen oder arbeiten möchten. Freunde, die es brauchen, können mir folgen, um gemeinsam zu lernen.

Component ist eine der leistungsstärksten Funktionen von Vue. Komponenten können HTML-Elemente erweitern, wiederverwendbaren Code kapseln und einige Komponenten entsprechend den Projektanforderungen abstrahieren. Jede Komponente umfasst Präsentation, Funktionalität und Stil. Jede Seite verwendet unterschiedliche Komponenten, um die Seite entsprechend ihren eigenen Anforderungen zusammenzufügen. Dieses Entwicklungsmodell macht die Front-End-Seite einfach erweiterbar und hochflexibel und erreicht außerdem eine Entkopplung zwischen Komponenten.

Vor kurzem musste ich auf Wunsch des Unternehmens eine schöne Kalenderkomponente entwickeln (kann auf IOS, Android, PC IE9+ ausgeführt werden). Nachdem ich sie geschrieben habe, möchte ich sie teilen und hoffe, dass jeder sie kritisieren kann .

Machen wir zuerst einen Screenshot

Der Code wurde an https://github.com/zhangKunUserGit/vue- weitergegeben. Komponente (lokaler Download)

Verwendung

Lassen Sie mich Ihnen erklären, wie Sie es entsprechend Ihren Anforderungen verwenden (das Obige ist: HTML , das Folgende ist JS)

<date-picker
 v-if="showDatePicker"
 :date="date"
 :min-date="minDate"
 :max-date="maxDate"
 @confirm="confirm"
 @cancel="cancel"
 ></date-picker>

import DataPicker from './components/DatePicker.vue';
import './style.scss';
new Vue({
 el: '#app',
 data() {
 return {
 date: '2017-09-11',
 minDate: '2000-09-11',
 maxDate: '2020-09-11',
 showDatePicker: false,
 selectedDate: '点击选择日期',
 };
 },
 methods: {
 openDatePicker() {
 this.showDatePicker = true;
 },
 confirm(value) {
 this.showDatePicker = false;
 this.selectedDate = value;
 },
 cancel() {
 this.showDatePicker = false;
 },
 },
 components: {
 DataPicker,
 },
});

Wir geben den Maximalwert, den Minimalwert und den Anfangswert an. Das einzige Manko ist, dass das Zeitformat nur JJJJ-MM-TT (12.12.2017) sein kann Sie können den Code von Github abrufen und ausführen, um einen Blick darauf zu werfen (da er nicht sorgfältig getestet wurde, kann es zu Fehlern und Leistungsproblemen kommen, ich hoffe, sie werden darauf hingewiesen).

(1) Zeichnen Sie zuerst die Schnittstelle

Das ist nicht der Punkt, HTML und CSS sollten sehr einfach sein, Sie werden es vielleicht spüren, wenn Schauen Sie sich mein CSS an. Mein Name ist zu lang, nur weil unser Unternehmen ihn verwendet, und ich mache mir Sorgen, dass andere Stile ihn beeinflussen (es kann auch andere Möglichkeiten geben, ich hoffe, jemand kann darauf hinweisen)

(2) Montageterminliste

Schauen Sie sich zuerst den Code an:

rows() {
 const { year, month } = this.showDate;
 const months = (new Date(year, month, 0)).getDate();
 const result = [];
 let row = [];
 let weekValue;
 // 按照星期分组
 for (let i = 1; i <= months; i += 1) {
 // 根据日期获取星期，并让开头是1，而非0
 weekValue = (new Date(year, month, i)).getDay() + 1;
 // 判断月第一天在星期几，并填充前面的空白区域
 if (i === 1 && weekValue !== 1) {
 this.addRowEmptyValue(row, weekValue);
 this.addRowDayValue(row, i);
 } else {
 this.addRowDayValue(row, i);
 // 判断月最后一天在星期几，并填充后面的空白区域
 if (i === months && weekValue !== 7) {
 this.addRowEmptyValue(row, (7 - weekValue) + 1);
 }
 }
 // 按照一周分组
 if (weekValue % 7 === 0 || i === months) {
 result.push(row);
 row = [];
 }
 }
 this.showDate.monthStr = monthJson[this.showDate.month];
 return result;
},

Meine Idee ist:

(1) Ermitteln Sie die Anzahl der Tage im Monat und gruppieren Sie sie nach Woche;

(2) Wenn der erste Tag des Monats nicht auf Montag fällt, tragen Sie vorne einen Nullwert ein. Wenn der letzte Tag des Monats nicht am Sonntag liegt, tragen Sie auf die gleiche Weise den Nullwert am Ende ein. Der Zweck ist: Die Länge der Handicap-Gruppe beträgt 7, was einer Woche entspricht. Auf diese Weise können Sie das Flex-Layout schnell entwickeln.

(3) Es enthält auch einige Einschränkungen, z. B. weniger als minDate und größer als maxDate, keine Klicks usw.

( 3) Wechseln Sie den Monat

(1) Der vorherige Monat

/**
 * 切换到上一个月
 */
prevMonth() {
 if (this.prevMonthClick) {
 return;
 }
 this.prevMonthClick = true;
 setTimeout(() => {
 this.prevMonthClick = false;
 }, 500);
 this.fadeXType = 'fadeX_Prev';
 // 如何当前月份已经小于等于minMonth 就不让其在执行
 if (this.isMinLimitMonth()) {
 return;
 }
 const { year, month } = this.showDate;
 // 判断当前月份，如果已经等于1（1就是一月，而不是二月）
 if (month <= 1) {
 this.showDate.year = year - 1;
 this.showDate.month = 12;
 } else {
 this.showDate.month -= 1;
 }
},

setTimeout() lässt ihn hauptsächlich danach automatisch verschwinden Animation anzeigen. fadeXType ist der Animationstyp

(2) Nächster Monat

/**
 * 切换到下一个月
 */
nextMonth() {
 if (this.nextMonthClick) {
 return;
 }
 this.nextMonthClick = true;
 setTimeout(() => {
 this.nextMonthClick = false;
 }, 500);
 this.fadeXType = 'fadeX_Next';
 // 如何当前月份已经大于等于maxMonth 就不让其在执行
 if (this.isMaxLimitMonth()) {
 return;
 }
 const { year, month } = this.showDate;
 // 判断当前月份，如果已经等于12（12就是十二月）
 if (month >= 12) {
 this.showDate.year = year + 1;
 this.showDate.month = 1;
 } else {
 this.showDate.month += 1;
 }
},

Die setTimeout() hier hat das gleiche Prinzip wie die prevMonth-Methode.

Die wichtigsten Punkte, die für die beiden oben genannten Funktionen des Monatswechsels zu beachten sind:

a. Da es minDate und maxDate gibt, das erste Es ist zu beachten, dass diese Grenze nicht überschritten werden darf.

b. Berücksichtigen Sie die Änderung des Jahres nach dem Wechsel des Monats. Wenn der Monat größer als 12 ist, wird das Jahr um 1 addiert und der Monat wird 1.

(4) Wählen Sie das Jahr

(1) Klicken Sie auf das oberste Jahr, um die Jahresliste anzuzeigen

openYearList() {
 if (this.showYear) {
 this.showYear = false;
 return;
 }
 const index = this.yearList.indexOf(this.selectDate.year);
 this.showYear = true;
 // 打开年列表，让其定位到选中的位置上
 setTimeout(() => {
 this.$refs.yearList.scrollTop = (index - 3) * 40;
 });
},

(2) Wählen Sie das Jahr

selectYear(value) {
 this.showYear = false;
 this.showDate.year = value;
 let type;
 // 当日期在最小值之外，月份换成最小值月份 或者 当日期在最大值之外，月份换成最大值月份
 if (this.isMinLimitMonth()) {
 type = 'copyMinDate';
 } else if (this.isMaxLimitMonth()) { // 当日期在最大值之外，月份换成最大值月份
 type = 'copyMaxDate';
 }
 if (type) {
 this.showDate.month = this[type].month;
 this.showDate.day = this[type].day;
 this.resetSelectDate(this.showDate.day);
 return;
 }
 let dayValue = this.selectDate.day;
 // 判断日是最大值，防止另一个月没有这个日期
 if (this.selectDate.day > 28) {
 const months = (new Date(this.showDate.year, this.showDate.month, 0)).getDate();
 // 当前月份没有这么多天，就把当前月份最大值赋值给day
 dayValue = months < dayValue ? months : dayValue;
 }
 this.resetSelectDate(dayValue);
},

Achten Sie beim Wechsel des Jahres auf folgende Aspekte:

a. Berücksichtigen Sie minDate und maxDate, denn wenn der zuvor ausgewählte Monat Januar ist, die Grenze jedoch September ist, gibt es kein Problem in dem Jahr, das größer als minDate ist (z. B. 2017), aber wenn es um das spezifische geht Jahr von minDate (z. B. 2010), dann kann der Mindestwert des Monats nur verwendet werden. Es ist September, der Monat muss geändert werden, und das Gleiche gilt für maxDate.

b. Der Tag, den Sie zuvor ausgewählt haben, war 31. Da dieser Monat nach dem Wechsel des Jahres nur noch 30 Tage hat, denken Sie daran, den Tag auf den Maximalwert dieses Monats zu ändern, der 30 ist.

(5) Verarbeitung der Originaldaten

Tatsächlich sollte dieser Punkt unter normalen Umständen im ersten Schritt besprochen werden, aber ich bin es Basierend auf meinen Entwicklungsgewohnheiten zum Schreiben von Schritten. Normalerweise schreibe ich zuerst die Funktion und simuliere die Daten. Nach dem Schreiben berücksichtige ich dann das ursprüngliche Datenformat und bestimmte Belichtungsmethoden usw., da ich sie auf diese Weise nicht immer wieder ändern muss die Entwicklung und Stimmung.

initDatePicker() {
 this.showDate = { ...this.splitDate(this.date, true) };
 this.copyMinDate = { ...this.splitDate(this.minDate) };
 this.copyMaxDate = { ...this.splitDate(this.maxDate) };
 this.selectDate = { ...this.showDate };
},
splitDate(date, addStr) {
 let result = {};
 const splitValue = date.split('-');
 try {
 if (!splitValue || splitValue.length < 3) {
 throw new Error(&#39;时间格式不正确&#39;);
 }
 result = {
 year: Number(splitValue[0]),
 month: Number(splitValue[1]),
 day: Number(splitValue[2]),
 };
 if (addStr) {
 result.week = (new Date(result.year, result.month, result.day)).getDay() + 1;
 result.monthStr = monthJson[result.month];
 result.weekStr = weekJson[result.week];
 }
 } catch (error) {
 console.error(error);
 }
 return result;
},

Der Zweck hier ist:

a. Verarbeiten Sie die Originaldaten, überprüfen Sie die Originaldaten und speichern Sie sie mit JSON zwischen, um nachfolgende Vorgänge und die Anzeige zu erleichtern . Ich bin nur mit dem Format JJJJ-MM-TT kompatibel und andere Formate sind nicht kompatibel. Wenn Sie mit anderen Formaten kompatibel sein möchten, können Sie den Code ändern oder andere Bibliotheken wie moment.js verwenden, um dies zu tun .

b. Das geteilte Format ist wie folgt:

rrree

Das oben Gesagte habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie implementiert requireJS einen Modullader?

Implementierung des MVVM-Frameworks in js (ausführliches Tutorial)

Erklärung des Scope-Bereichs in AngularJS

So implementieren Sie eine leistungsstarke Ladereihenfolge in Javascript

So implementieren Sie die globale Registrierung in Axios

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Kalender mithilfe von Vue-Komponenten (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!