一個用vue2.0寫的日期控件,可以支持簡單的年月日選擇。地址:https://github.com/Stevenzwzhai/vue-datepicker。
首先是關於日期對象的使用,基本就是日期的設置(date.setDate())與獲取(date.getFullYear(),date.getMonth(),date,getDate())。在這里主要的一點就是根據選擇的年和月份去設定當月的天數,使用設定日期,date.setDate(year, month, 0);這里要注意的是,獲取哪個月month就是幾,day設為零。而獲取當前日期時月份要減一,因為在js的Date對象中月份是0~11.
接下來是關於滑動,在這里使用css3的translate3d,由於是用移動端,因此使用3d動畫時可以自動開啟設備加速,在一定程度上提高性能。這里只要仔細計算沒什么大問題,還要要注意邊界問題,滑出邊界肯定是不行的。另外滑動加一點時間和動畫函數可以使得滑動更加美觀,我是用來transition-timing-function:ease-out。
這里做的是一個組件,所以自然要把設定的時間返回,就涉及到父子組件通信,vue2.0去掉了dispatch,就用$on和$emit就好。具體使用方法,在官網或者imooc都有。