[筆記] Vuetify 客製化製作彈出 + 滾動選單

章節連結

Vuetify 的 Selection 部分,雖說是節省了建立下拉選單的時間,不過這回遇上要客製化的場合,那麼就得抽絲剝繭,將所需要的功能、程式碼和CSS取出。
vuetify


實作過程

[CSS]

靜態部分

1. dark 和 light 兩種模式的顏色有不同,你可以綁訂參數。同時,你會發現要綁定的樣式條件很多,不適合全部寫在 <template> 中,會讓維護難度增加。(關鍵字:v-bind-class, computed)
2. 下拉選單需要用到 position:absolute 來讓它相對浮動,不過要設定最大高度和 overflow:auto,這樣才不會破版

動態部分

運用 transition:決定動畫秒數和移動方向
運用 transform:決定文字移動位置和縮放比例

[其他部分]

1. 為了方便組件的值共用,運用 vuex 是必須的。你可以將最後的選取結果存放到 vuex 裡面,然後讓 filter 的主欄位裡顯示選取結果就好
2. 各個選項的值,其 “X” 取消部分,可以運用 splice 的方法來刪除即可。不過你不能直接刪改 vuex 的值,但你可以先將其複製一份之後,再寫入刪除後的結果到 vuex 就好
3. 當有了前一次的選取結果後,當使用者再度點開選單,你可以監聽這個值,並把這些值放回對應的 model 中,這樣一來就會有「保留使用者前一次」選取結果的效果 (運用 watch )


Demo 網址

[網址]:https://codesandbox.io/s/custom-filter-with-dropdown-vuetify-114-y6x6d


相關文章

★全文分享★  [筆記] Vuetify 客製化製作彈出 + 滾動選單
[筆記] Vuetify 客製化製作彈出 + 滾動選單
Vuetify 的 Selection 部分,雖說是節省了建立下拉選單的時間,不過這回遇上要客製化的場合,那麼就得抽絲剝繭,將所需要的功能、程式碼和CSS取出。實作過程[CSS]靜態部分1. dark 和 light 兩種模式的
★全文分享★  [筆記] Vuetify Expansion 客製標題按鈕
[筆記] Vuetify Expansion 客製標題按鈕
Vuetify 的 Expandsion 套件,對於製作展開選單的需求,可以立即套用。不過在其客製化標題上,要在標題左邊加上一些東西(例如 icon, 按鈕……)等,只要運用 slot=”header” 的特性,就可以達成。實作過程
按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:20