https://codepen.io/hereiscasio/pen/RwbXVaR

Used UI Component ( #3 )

#1 Progress > Linear, #2 Lists, #3 File inputs

UI 圖來源見此

Discussion

<v-card-title ...>
    <v-select .../>
    <v-file-input .../>
</v-card-title>

看到這張圖時，套用 FCC 的概念，要怎麼思考呢？最上方像是 Toolbar 的部分確實也可靠 v-toolbar 實現，但元件當然是用越少越好，所以直接把它當作 v-card-title 是相對簡潔的做法。此處特別之處在於，為了做到跟源圖相同，也就是 "點擊上傳按鈕就跳出文件上傳的視窗"，我們因此加了少量的客製化 CSS，把 v-file-input 的外觀改到只剩一個 icon（ v-file-input 原型，詳見官方文件 ）

客製化 CSS 並不可怕，必要時還是得做，至於說對網頁相容性是否會有影響，那就跟客製化方式有關，此處對 v-file-input 的修改，在概念上剛好與 "添加功能 / styling" 相反，大多做的事情是對其部分外觀隱藏、間距歸零 . . .，這種方式的改動，一般來說對網頁相容性影響不大