Vue 組件（component）教程之實現(xiàn)精美的日歷方法示例
組件（component）是Vue最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼，根據(jù)項目需求，抽象出一些組件，每個組件里包含了展現(xiàn)、功能和樣式。每個頁面，根據(jù)自己的需要，使用不同的組件來拼接頁面。這種開發(fā)模式使得前端頁面易于擴(kuò)展，且靈活性高，而且組件之間也實現(xiàn)了解耦。
最近應(yīng)公司的要求，需要開發(fā)一個精美的日歷組件（IOS , 安卓， PC 的IE9+都能運行），寫完后想把它分享出來，希望大家批評。
先來個截圖
代碼已經(jīng)分享到 https://github.com/zhangKunUserGit/vue-component （本地下載）
使用方法
根據(jù)需求先說一下怎么用吧 （上面是：HTML， 下面是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,
},
});
我們提供了最大值、最小值和初始值，唯一不足的地方是時間格式只能是YYYY-MM-DD （2017-12-12） ，大家可以從github上拉取代碼運行看一下（由于沒有仔細(xì)測試，可能會有bug和性能問題，希望指出）。
（一）先畫好界面
這個不是重點，HTML 和 CSS，應(yīng)該很簡單，大家看我的css 可能感覺我的命名太長了，只因為我們公司用，擔(dān)心其他樣式影響它（可能有其他方式吧，希望大神指出）
（二）組裝日期列表
先看代碼：
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) {
// 根據(jù)日期獲取星期，并讓開頭是1，而非0
weekValue = (new Date(year, month, i)).getDay() + 1;
// 判斷月第一天在星期幾，并填充前面的空白區(qū)域
if (i === 1 && weekValue !== 1) {
this.addRowEmptyValue(row, weekValue);
this.addRowDayValue(row, i);
} else {
this.addRowDayValue(row, i);
// 判斷月最后一天在星期幾，并填充后面的空白區(qū)域
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）獲取月份天數(shù)，并按照星期分組；
（2）如果月份第一天不在星期一，前面填充空值。同理，如何月份最后一天不在周日，最后面填充空值，目的是：讓分的組 長度都是7，也就是一周。這樣可以用flex布局方式快速開發(fā)了；
（3）里面也包含一些限制，比如小于minDate和大于maxDate, 不讓點擊等等
（三）切換月份
（1）上一個月份
/**
* 切換到上一個月
*/
prevMonth() {
if (this.prevMonthClick) {
return;
}
this.prevMonthClick = true;
setTimeout(() => {
this.prevMonthClick = false;
}, 500);
this.fadeXType = 'fadeX_Prev';
// 如何當(dāng)前月份已經(jīng)小于等于minMonth 就不讓其在執(zhí)行
if (this.isMinLimitMonth()) {
return;
}
const { year, month } = this.showDate;
// 判斷當(dāng)前月份，如果已經(jīng)等于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 = 'fadeX_Next';
// 如何當(dāng)前月份已經(jīng)大于等于maxMonth 就不讓其在執(zhí)行
if (this.isMaxLimitMonth()) {
return;
}
const { year, month } = this.showDate;
// 判斷當(dāng)前月份，如果已經(jīng)等于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. 要考慮切換月份后年的變化，當(dāng)月份大于12后，年加1 ，月變成 1。
（四）選擇年份
（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;
// 當(dāng)日期在最小值之外，月份換成最小值月份 或者 當(dāng)日期在最大值之外，月份換成最大值月份
if (this.isMinLimitMonth()) {
type = 'copyMinDate';
} else if (this.isMaxLimitMonth()) { // 當(dāng)日期在最大值之外，月份換成最大值月份
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();
// 當(dāng)前月份沒有這么多天，就把當(dāng)前月份最大值賦值給day
dayValue = months < dayValue ? months : dayValue;
}
this.resetSelectDate(dayValue);
},
在切換年份時注意一下方面：
a. 考慮minDate和maxDate, 因為如果之前你選擇的月份是1月，但是限制是9月，在大于minDate（比如2017） 年份沒有問題，但是到了minDate 的具體年份（比如2010），那么月份最小值只能是九月，需要修改月份，maxDate同理。
b. 如何之前你選擇的day是31，由于切換年份后，這個月只有30天，記得把day 換成這個月最大值，也就是30。
（五）處理原始數(shù)據(jù)
其實這一條正常情況下，應(yīng)該放在第一步講，但是我是根據(jù)我的開發(fā)習(xí)慣來寫步驟的。我一般都是先寫功能，數(shù)據(jù)是模擬的，等寫好了，再考慮原始數(shù)據(jù)格式和暴露具體的方法等等，因為這樣不會改來改去，影響開發(fā)和心情。
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('時間格式不正確');
}
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. 處理原始數(shù)據(jù)，把原始數(shù)據(jù)查分，用json緩存下來，這樣方便后面操作和顯示。這里面我只兼容YYYY-MM-DD的格式，其他的都不兼容，如果你想兼容其他格式，你可以修改其代碼，或者用moment.js 等其他庫幫你做這件事情。
b. 拆分后的格式如下：
year: '', month: '', day: '', week: '', weekStr: '', monthStr: '',
總結(jié)
上面就是開發(fā)這個組件的詳細(xì)講解，如有不妥，請指出批評。 仔細(xì)想想，其實這個不難，就是有點瑣碎。仔細(xì)就好
這里的所有動畫都是用的Vue 的 transition，大家可以看看官網(wǎng)，非常詳細(xì)。
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了Vue導(dǎo)航守衛(wèi)使用教程，可以向任意給定的導(dǎo)航守衛(wèi)傳遞next，但是next的使用過程容易出錯，需要確保next在任何給定的導(dǎo)航守衛(wèi)中都被嚴(yán)格調(diào)用一次2023-04-04
這篇文章主要給大家介紹了關(guān)于Vue記住滾動條和實現(xiàn)下拉加載的完美方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了vite項目如何集成eslint和prettier問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
最近小編接了一個新項目，項目需求要實現(xiàn)一個聊天功能，今天小編通過實例代碼給大家介紹vue cli使用融云實現(xiàn)聊天功能的方法，感興趣的朋友跟隨小編一起看看吧2019-04-04
淺談Vue.js中ref ($refs)用法舉例總結(jié)
本篇文章主要介紹了淺談Vue.js中ref ($refs)用法舉例總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Mpvue中使用Vant Weapp組件庫的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Vue Cli3 打包配置并自動忽略console.log語句的方法
這篇文章主要介紹了Vue Cli3 打包配置并自動忽略console.log語句的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要給大家介紹了關(guān)于VUE中watch的詳細(xì)使用教程,watch是vue實例的一個屬性,主要用來監(jiān)聽數(shù)據(jù)的變化,并做出一些操作,需要的朋友可以參考下2023-08-08
vue使用keep-alive后從部分頁面進(jìn)入不緩存示例詳解
這篇文章主要給大家介紹了關(guān)于vue使用keep-alive后從部分頁面進(jìn)入不緩存的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-03-03
每個Vue實例在創(chuàng)建時都要經(jīng)過一系列初始化,?例如設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到DOM并在數(shù)據(jù)變化時更新DOM等，同時,?也會運行一些叫作生命周期鉤子的函數(shù)，接下來讓我們一起來探索Vue實例被創(chuàng)建時都經(jīng)歷了什么，感興趣的同學(xué)跟著小編一起來探討吧2023-05-05