前言

寫插件是很有意思，也很鍛煉人，因為這個過程中能發現許多的細節問題。在前端發展的過程中，jQuery無疑是一個重要的里程碑，圍繞著這個優秀項目也出現了很多優秀的插件可以直接使用，大大節省了開發者們的時間。jQuery最重要的作用是跨瀏覽器，而現在瀏覽器市場雖不完美，但已遠沒有從前那么慘，數據驅動視圖的思想倍受歡迎，大家開始使用前端框架取代jQuery，我個人比較喜歡Vue.js，所以想試著用Vue.js寫一個組件出來。

為了發布到npm上，所以給項目地址改名字了，但是內部代碼沒有改，使用方法比之前方便。

GitHub地址: Here

功能&期望

這個datepicker目前僅實現了一些常用的功能：

選擇時間(這話說得有點多余) 最大/最小時間限制 中/英文切換(其實也就星期和月份需要切換) 可以以.vue形式使用，也可在瀏覽器環境中直接使用 沒了。。。

目錄結構

萬事的第一步依然是創建項目，只是單一組件，結構并不復雜，Datepicker.vue是最重要的組件文件，dist是webpack的輸出文件夾，index.js是webpack打包的入口文件，最后是webpack的配置文件，用來對我們的庫文件進行打包用的。因此項目結構就是這樣：

.├── Datepicker.vue├── LICENSE├── README.md├── dist│ └── vue-datepicker.js├── index.js├── package.json└── webpack.config.js

從Datepicker.vue入手

以.vue的方式寫Vue組件是一種特殊寫法，每個Vue文件包括template, script, style三部分，template最好不要成為片段實例,所以最外層先套一層div，當做整個組件的根元素。一個datepicker一般由兩部分組成，一個用來顯示日期的input框，一個用來選擇日期的panel，因為我發現input在移動端會自動喚起鍵盤，所以沒有使用input，直接用了div模擬,通過點擊事件決定panel的顯隱。value是最終的結果，需要和父組件通信，所以將value寫成了prop，在父組件中使用value.sync="xxx"，datepicker的value就和父組件的xxx雙向綁定了。

<template> <div class="date-picker">  <div class="input" v-text="value" @click="panelState = !panelState"> </div> <div class="date-panel" v-show="panelState"> </div></template><scrip> export default {  data () {   return {    panelState: false //初始值，默認panel關閉   }  },  props: {   value: String  } }</script>

渲染日期列表

一個月最少是28天，如果把周日排在開頭，那么最少(1號恰好是周日)需要4行，但是每個月天數30，31居多，而且1號又不一定是周日，我索性干脆按最多的情況設計了，共6行，當月日期沒填滿的地方用上個月或下個月的日期補齊，這樣就方便計算了，而且切換月份時候panel高度不會變化。日期列表的數組需要動態計算，Vue提供了computed這個屬性，所以直接將日期列表dateList寫成計算屬性。我的方法是將日期列表固定為長度為42的數組，然后將本月，上個月，下個月的日期依次填充。