1 .使用dayjs這個三方庫,得出來的月份,星期日都是從0開始的。所以這些地方都要重點照顧,天是對的。
2 .v-bind可以動態賦值傳遞props,而且任何類型的值都可以傳遞給props.
3 .將一個對象的所有屬性作為prop傳入,可以使用不帶參數的v-bind="post"來代替原來的每個單獨傳入
props的一些知識
1 .單向數據流,父級的prop的更新會向下流動到子組件中,但是反過來是不行的,為了避免子組件意外的改變父組件的狀態,從而導致數據的流向難以理解
2 .每當父組件發生改變的時候,子組件的所有prop都會刷新為最新值,這就意味者你不應該在一個子組件內部改變prop,如果你這樣做了,Vue會報錯
3 .需要改變prop的兩種情況:希望把接收的prop作為本地數據來使用,定義一個本地的data屬性并將這個prop作為其初始值。
4 .prop以原始值傳入,并且需要轉換:將其放在computed里面,那不就是element里面寫組件的時候了么。。。
5 .對象和數組是通過引用傳入的,所以對一個數組或者是對象類型的prop來說,在子組件中改變這個對象或者數據本身將會影響到父組件的狀態
6 .動態加入的樣式如何覆蓋之前的樣式,如果按照權重來自定義實現的化,那就要在一開始設計css的時候就要想到,目前最簡單的就是直接加 !import
7 .使用z-index來保證永遠是在最上面的。
8 .本來的日期周日是0,但是這樣算的話可能需要分類,所以直接把0變成7這樣統一來計算,這樣的話不論是傳的時候還是后來結算的時候,也是很放方便的。
傳入非prop的特性處理情況
1 .傳入到一個組件的props,但是改組件并沒有相應prop定義的特性。
2 .絕大多數特性來說,從外部提供給組件的值會替換掉組件內部設置好的值,特別的class,style特性來說,兩邊的值都會被合并起來,從而得到最終的值
3 .inheritAttrs:false這個特性暫時看不懂,需要從例子中去看。
目前bug
1 .由于日期是我直接++,--,所以你選到0的時候在往前選年會出錯,一般情況下是不糊i出現這個錯誤的,但是如果非要出錯誤也是可以的
未實現功能-對比elemnt
1 .支持一系列的日期格式選擇,并且可以配置自己想要的日期格式。因為用的是一個框架庫,可能一些特別偏的格式可能不能生成。
2 .日期范圍的沒有實現,比如選擇一段的時間范圍選項
3.其他快捷日期:現在只支持一個一個的選,不支持年和月份的列表選擇
實現思路
css方面
1 .整體布局使用flex,特別是對于類似于日期排列這種特別規則的元素,通過設置大小可以很方便的實現日歷的效果
2 .一些過渡實現的優化操作,在Vue里面使用css實現的效果
js方面
1 .使用dayjs類庫,只要首先找到本月的第一天是周幾,根據這個定位實現一個數組,以第一天為第一個,根據是周幾來算給這個數組從前或者從后所需要添加的日期,從而實現一個需要渲染整個日歷組件一個顯示單元的所有數據
2 .把這個函數分離,接下來選擇下一個月或者上一年的操作只需要更換傳入參數即可
3 .還有一個就是父子組件的交互,分別是prop和emit從子往父傳入。