使用element UI 的日期插件的時候,經常會搭配狀態的切換,比如從日選擇,切換到月選擇,此時如果用一個日期插件來動態切換它的type值,則會出現一個bug:在點擊日期插件,但是不選中日期,直接再點切換type的按鈕,則再次打開日期面板的時候,面板會直接插入日期控件的下方,導致頁面層級不正確,頁面布局錯亂。如下圖:
正確圖如下:
錯亂樣式如下:
遇到這種情況,大部分人都選擇寫兩個日期插件,然后通過v-show來切換(用v-if都還是會有這樣的問題)。
但是如果不想寫那么多,綁定兩個參數,解決辦法就是直接給這個日期控件加上一個key,切換日期控件的type的時候,也動態的設置key,這樣日期插件會重新渲染,就不會出現上面界面的錯亂了。