집 > 기사 > 웹 프론트엔드 > Vue 컴포넌트를 사용하여 달력을 구현하는 방법(자세한 튜토리얼)

Vue 컴포넌트를 사용하여 달력을 구현하는 방법(자세한 튜토리얼)

亚连원래의: 2018-06-13 10:35:383554검색

Components는 Vue 학습에서 꼭 알아야 할 부분입니다. 다음 글에서는 아름다운 달력을 구현하기 위한 Vue 컴포넌트(컴포넌트) 튜토리얼에 대한 관련 정보를 주로 샘플 코드를 통해 소개하고 있습니다. 모든 사람의 학습에 유용하거나 특정 참고 자료와 학습 가치가 있는 작업입니다. 필요한 친구는 저를 따라와 함께 배우십시오.

Component는 Vue의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하고, 재사용 가능한 코드를 캡슐화하고, 프로젝트 요구 사항에 따라 일부 구성 요소를 추상화할 수 있습니다. 각 구성 요소에는 프레젠테이션, 기능 및 스타일이 포함됩니다. 각 페이지는 서로 다른 구성 요소를 사용하여 필요에 따라 페이지를 연결합니다. 이 개발 모델을 사용하면 프런트 엔드 페이지를 쉽게 확장하고 유연성을 높일 수 있으며 구성 요소 간의 분리도 달성할 수 있습니다.

최근 회사의 요청에 따라 아름다운 캘린더 컴포넌트(IOS, Android, PC IE9+에서 실행 가능)를 개발해야 합니다. 작성 후 공유하고 모두가 비판할 수 있기를 바랍니다.

먼저 스크린샷을 찍읍시다

코드는 https://github.com/zhangKunUserGit/vue-comComponent에 공유되었습니다. (로컬 다운로드)

사용방법

알려주세요 필요에 따라 먼저 어떻게 사용하는지 알려주세요. 사용하세요 (위는 HTML, 다음은 JS)

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

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

최대값, 최소값, 초기값만 제공한다는 단점이 있습니다. YYYY-MM-DD(2017-12-12)입니다. github에서 코드를 가져와서 실행하여 살펴볼 수 있습니다(주의 깊게 테스트하지 않으면 버그 및 성능 문제가 있을 수 있으므로 지적해 주시길 바랍니다).

(1) 인터페이스를 먼저 그려보세요

이게 요점이 아닙니다. HTML과 CSS는 매우 단순해야 합니다. 제 CSS를 보시면 저희 회사 때문에 제 이름이 너무 길다고 느끼실 수도 있습니다. 사용하고 있는데 다른 스타일이 걱정되네요 영향을 주네요 (다른 방법도 있을 수 있으니 신이 지적해주셨으면 좋겠습니다)

(2) 날짜 목록을 조립하세요

코드를 먼저 보세요:

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

내 아이디어는 다음과 같습니다.

(1) 해당 월의 일수를 가져오고 주별로 그룹화합니다.

(2) 해당 월의 첫날이 월요일이 아닌 경우 앞에 null을 입력합니다. 가치. 마찬가지로, 월의 마지막 날이 일요일이 아닌 경우 끝에 null 값을 입력합니다. 목적은 핸디캡 그룹의 길이가 7 이므로 1 주일입니다. 이는 플렉스 레이아웃을 사용하여 신속하게 개발할 수 있습니다.

(3) 또한 minDate보다 작고 maxDate보다 크며 클릭을 허용하지 않는 등의 일부 제한 사항이 포함되어 있습니다.

(3) 월 전환

(1) 지난 달

/**
 * 切换到上一个月
 */
prevMonth() {
 if (this.prevMonthClick) {
 return;
 }
 this.prevMonthClick = true;
 setTimeout(() => {
 this.prevMonthClick = false;
 }, 500);
 this.fadeXType = &#39;fadeX_Prev&#39;;
 // 如何当前月份已经小于等于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()은 주로 애니메이션을 표시한 후 자동으로 사라지도록 허용합니다. fadeXType은 애니메이션 유형입니다

(2) 다음 달

/**
 * 切换到下一个月
 */
nextMonth() {
 if (this.nextMonthClick) {
 return;
 }
 this.nextMonthClick = true;
 setTimeout(() => {
 this.nextMonthClick = false;
 }, 500);
 this.fadeXType = &#39;fadeX_Next&#39;;
 // 如何当前月份已经大于等于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;
 }
},

여기의 setTimeout() 및 prevMonth 메소드는 동일한 원리를 갖습니다.

위의 두 가지 월 전환 기능에서 주의할 점은 다음과 같습니다.

a. minDate와 maxDate가 있으므로 이 한도를 초과하지 않는 것이 가장 먼저 고려되어야 합니다.

b. 월을 전환한 후 연도 변경을 고려해야 합니다. 월이 12보다 클 경우 연도에 1을 더해 월이 1이 됩니다.

(4) 연도 선택

(1) 최상위 연도를 클릭하면 연도 목록이 표시됩니다.

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) 연도 선택

selectYear(value) {
 this.showYear = false;
 this.showDate.year = value;
 let type;
 // 当日期在最小值之外，月份换成最小值月份 或者 当日期在最大值之外，月份换成最大值月份
 if (this.isMinLimitMonth()) {
 type = &#39;copyMinDate&#39;;
 } else if (this.isMaxLimitMonth()) { // 当日期在最大值之外，月份换成最大值月份
 type = &#39;copyMaxDate&#39;;
 }
 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);
},

다음 사항에 주의하세요. 연도 전환 시 측면:

a. minDate 및 maxDate를 고려하세요. 이전에 선택한 달이 1월이고 제한이 9월인 경우 minDate보다 큰 연도(예: 2017)에는 문제가 없지만 minDate의 특정 연도(예: 2010)에 도달하면 해당 월의 최소값은 9월만 가능하며 해당 월을 수정해야 합니다. maxDate에도 동일하게 적용됩니다.

　b. 이전에 선택한 날짜는 31이었습니다. 연도를 변경하면 이번 달은 30일만 있으므로 날짜를 이번 달의 최대값인 30으로 변경해야 합니다.

(5) 원시 데이터 처리

사실 일반적인 상황에서는 이 항목을 첫 번째 단계에서 논의해야 하지만, 내 개발 습관을 기반으로 단계를 작성했습니다. 나는 일반적으로 함수를 먼저 작성하고 데이터를 시뮬레이션한 후 원본 데이터 형식과 특정 노출 방법 등을 고려합니다. 이렇게 하면 데이터가 계속해서 변경되지 않으므로 영향을 미칠 것입니다. 발달과 기분.

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(&#39;-&#39;);
 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;
},

여기의 목적은 다음과 같습니다.

　a. 후속 작업 및 표시를 용이하게 하기 위해 원본 데이터를 처리하고 원본 데이터를 확인한 후 json으로 캐시합니다. 저는 YYYY-MM-DD 형식하고만 호환되고 다른 형식은 호환되지 않습니다. 다른 형식과 호환되도록 하려면 코드를 수정하거나 moment.js와 같은 다른 라이브러리를 사용하면 됩니다. .

b. 분할 형식은 다음과 같습니다.

year: &#39;&#39;,
month: &#39;&#39;,
day: &#39;&#39;,
week: &#39;&#39;,
weekStr: &#39;&#39;,
monthStr: &#39;&#39;,

위 내용은 앞으로 모든 분들께 도움이 되기를 바랍니다.