Comment implémenter un calendrier à l'aide des composants Vue (tutoriel détaillé)

Les composants sont une partie incontournable de l'apprentissage de Vue. L'article suivant vous présente principalement les informations pertinentes sur le didacticiel du composant Vue (composant) pour implémenter un beau calendrier. L'article le présente en détail à travers un exemple de code. très utile pour tout le monde Étudier ou travailler a une certaine valeur d'apprentissage de référence. Les amis qui en ont besoin peuvent me suivre pour étudier ensemble.

Le composant est l'une des fonctionnalités les plus puissantes de Vue. Les composants peuvent étendre des éléments HTML, encapsuler du code réutilisable et résumer certains composants en fonction des exigences du projet. Chaque composant inclut une présentation, des fonctionnalités et un style. Chaque page utilise différents composants pour diviser la page en fonction de ses propres besoins. Ce modèle de développement rend la page frontale facile à étendre et très flexible, et permet également un découplage entre les composants.

Récemment, à la demande de l'entreprise, j'ai besoin de développer un magnifique composant de calendrier (pouvant fonctionner sur IOS, Android, PC IE9+). Après l'avoir écrit, je souhaite le partager et j'espère que tout le monde pourra le critiquer. .

Prenons d'abord une capture d'écran

Le code a été partagé sur https://github.com/zhangKunUserGit/vue- composant (téléchargement local)

Comment l'utiliser

Laissez-moi vous expliquer comment l'utiliser en fonction de vos besoins (ce qui précède est : HTML , ce qui suit est 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,
 },
});

Nous fournissons la valeur maximale, la valeur minimale et la valeur initiale. Le seul inconvénient est que le format de l'heure ne peut être que AAAA-MM-JJ (2017-12). -12). Vous pouvez l'extraire de github. Exécutez le code et jetez-y un œil (en raison du manque de tests minutieux, il peut y avoir des bugs et des problèmes de performances, j'espère qu'ils seront signalés).

(1) Dessinez d'abord l'interface

Ce n'est pas le sujet, HTML et CSS devraient être très simples, vous le ressentirez peut-être quand vous regardez mon CSS Mon nom est trop long, simplement parce que notre entreprise l'utilise, et je crains que d'autres styles ne l'affectent (il peut y avoir d'autres moyens, j'espère que quelqu'un pourra le signaler)

(2) Liste des dates d'assemblage

Regardez d'abord le code :

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;
},

Mon idée est :

(1) Obtenez le nombre de jours du mois et regroupez-les par semaine ;

(2) Si le premier jour du mois n'est pas un lundi, remplissez le devant avec une valeur nulle. De la même manière, si le dernier jour du mois n'est pas un dimanche, remplissez la valeur nulle à la fin. Le but est le suivant : la durée du groupe de handicap est de 7, soit une semaine. De cette façon, vous pouvez développer rapidement en utilisant la mise en page flexible ;

(3) Il contient également certaines restrictions, telles que moins de minDate et supérieur à maxDate, aucun clic, etc.

( 3) Changer de mois

(1) Le mois précédent

/**
 * 切换到上一个月
 */
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() le fait principalement disparaître automatiquement après l'affichage de l'animation. fadeXType est le type d'animation

(2) Le mois suivant

/**
 * 切换到下一个月
 */
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;
 }
},

Le principe de setTimeout() ici est le même que celui de la méthode prevMonth.

Les principaux points à noter concernant les deux fonctions de changement de mois ci-dessus sont :

a. Parce qu'il y a minDate et maxDate, le premier. la chose à considérer est de ne pas dépasser cette limite.

b. Considérez le changement d'année après avoir changé de mois Lorsque le mois est supérieur à 12, l'année est ajoutée de 1 et le mois devient 1.

(4) Sélectionnez l'année

(1) Cliquez sur l'année du haut pour afficher la liste des années

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) Sélectionnez l'année

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);
},

Faites attention aux aspects suivants lorsque vous changez d'année :

a. Considérez minDate et maxDate, car si le mois que vous avez sélectionné auparavant est janvier, mais que la limite est septembre, il n'y a pas de problème dans l'année supérieure à minDate (comme 2017), mais quand elle atteint l'année spécifique de minDate (comme 2010), puis le mois. La valeur minimale ne peut être que septembre et le mois doit être modifié. La même chose s'applique à maxDate.

b. Le jour que vous avez sélectionné auparavant était le 31. Puisqu'après avoir changé d'année, ce mois ne compte que 30 jours, n'oubliez pas de changer le jour à la valeur maximale de ce mois, qui est 30.

(5) Traitement des données originales

En fait, dans des circonstances normales, cet élément devrait être discuté dans la première étape, mais je suis en me basant sur mes habitudes de développement Utiliser pour écrire les étapes. J'écris généralement la fonction en premier, et les données sont simulées. Une fois écrites, je considérerai ensuite le format de données d'origine et les méthodes d'exposition spécifiques, etc., car de cette façon, je ne les modifierai pas encore et encore, ce qui affectera le développement et l'humeur.

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;
},

Le but ici est :

a. Traiter les données originales, vérifier les données originales et les mettre en cache avec json, afin de faciliter les opérations ultérieures. et affichage. Je ne suis compatible qu'avec le format AAAA-MM-JJ, et les autres formats ne sont pas compatibles. Si vous souhaitez être compatible avec d'autres formats, vous pouvez modifier le code, ou utiliser d'autres bibliothèques telles que moment.js pour vous aider à le faire. .

b. Le format divisé est le suivant :

year: '',
month: '',
day: '',
week: '',
weekStr: '',
monthStr: '',

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Comment requireJS implémente-t-il un chargeur de module ?

Implémentation du framework MVVM dans js (tutoriel détaillé)

Explication de la portée dans angulairejs

Comment implémenter un ordre de chargement haute performance en javascript

Comment implémenter l'enregistrement global dans axios

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!