因專案的需要，而且當前元件庫並不支援業務，所以，重新對日曆元件進行封裝。該篇部落格就對實現日曆的思路進行存檔，方便以後的查閱。
先上圖：ui小哥哥的原型圖。接下來的思路都是根據該圖進行解說
- 接下來定義每個月對應天數的陣列，以及周一-週日日曆頭部的陣列。
```props: ,
showmonth:
},data() , , , , ,, ]
}
- 下面就需要對日曆面板的陣列進行操作了。年，月是從父元件傳入的，當年，月發生改變的時候，日曆面板的資料也隨之發生改變。所以，日曆面板的list通過計算屬性來進行其變更以及頁面的渲染。// 判斷當前是否是閏年
if(showyear%4 ===0 && showyear %100 === 0|| showyear%400 ===0) ;
// 對月份賦值
let month = showmonth;
// 對年份賦值
let year = showyear;
// 將日期進行拼接，拼接成每月1號的資料
let datevalue = year + '-' + month + '-' + '1';
// 確定當前日期在週幾-0代表的是週日，1代表的是周一。。。。
let currentweek = new date(date.parse(datevalue.replace(/-/g, '/'))).getday();
// 根據當前日期，判定需要在前面補充幾個日期，在後面補充幾個日期
// 目的是補位：將前乙個月的資料進行填充
// 獲取上乙個月的天數
let prelist = this.predata(month, year,list, currentweek, daysinmonth);
// 將本月的資料進行渲染
let currentlist = this.currentdata(daysinmonth, year,month, list);
// 目的是補充後面的位置，保證當前面板的資料完整
let nextlist = this.nextdata(list, year, month);
list = [...nextlist]
return list
}
- 上個月的資料的渲染list.push(obj);
}list =list.reverse();
return list;
},
- 當月的資料渲染list.push(obj)}}
return list
}
### 總結：
日曆的邏輯需要注意確定當月1號的位置，以及填充上個月，下個月的資料。記錄一下 自己的邏輯思路。
簡單的vue日曆元件
根據公司設計圖製作了乙個簡單的日曆元件，主要包括切換上一年 上一月 下一年 下一月，鎖定開始時間 結束時間等功能，以上就是效果圖。html child date0 child date1 js kim new vue date1 vue.component mcalendar methods els...
Vue日曆元件的功能
本來呢,開開心心的寫完了這個功能,然後發現elemeng更新了,增加了日曆元件這個功能 我的內心機器奔潰,但是,element的日曆元件太簡單了,我感覺還是手擼乙個吧,畢竟也不是很難 實現了顯示農曆,備註功能,點選某一天為某一天新增備註的功能.引用的是他人寫好的元件 在他的基礎上增加了功能,實現了備...
vue 元件的封裝
首先封裝元件的需求肯定是多個地方要用到同乙個東西，他們都有公共的地方，vue的封裝 簡單來說就是將公共引數封裝起來 然後在需要的地方引入 子元件封裝 background background align right current change currentchange size change ...