Vuetify 的 Selection 部分，雖說是節省了建立下拉選單的時間，不過這回遇上要客製化的場合，那麼就得抽絲剝繭，將所需要的功能、程式碼和CSS取出。
實作過程
[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 2 Dark Mode 配色設定與一些細節
知名的 Vuetify 框架中，有內建 Dark Mode 的
★全文分享★ [筆記] Vuetify select autocomplete 套件限制多選數量
在使用 Vuetify 前端框架開發時，當要給使
★全文分享★ [筆記] Vuetify + Babel + Vue.config.js 最佳化實踐
![[筆記] Vuetify + Babel + Vue.config.js 最佳化實踐](https://smlpoints.com/wp-content/uploads/notes-vuejs-node-js-initialize-projects-1.jpg "[筆記] Vuetify + Babel + Vue.config.js 最佳化實踐")
Vue 搭配 Vuetify 建立專案，在最後打包 Build
★全文分享★ [筆記] Vuetify Expansion 客製標題按鈕
Vuetify 的 Expandsion 套件，對於製作展開選
