vuetify 3 與 vuetify 2 常用的一些功能上的差異

近期將專案從vue 2 升到vue 3，也順便將vuetify 2升級到 vuetify 3，遇到了一些問題與差異在這邊記錄一下。

1. background

<!-- vuetify 3 -->
<div class="bg-red">

<!-- vuetify 2-->
<div class="red">

2. text color

<!-- vuetify 3 -->
<div class="red--text">

<!-- vuetify 2-->
<div class="text-red">

3. css 變數

// vuetify 3
thead {
        background-color: rgb(var(--v-theme-secondary));
}

// vuetify 2
thead {
        background-color: var(--v-secondary-base);
}

4. input 類 component props

<!-- vuetify 3 -->
<!-- 輸入框種類 variant="outlined" -->
<!-- 高度調整 density="compact" -->
<v-text-field
    v-model="data"
    variant="outlined"
    density="compact">
</v-text-field>

<!-- vuetify 2-->
<!-- 輸入框種類 outlined -->
<!-- 高度調整 dense -->
<v-text-field
    v-model="data"
    outlined
    dense>
</v-text-field>

5. v-text-field append-icon

<!-- vuetify 3 -->
<!-- append-inner-icon -->
<!-- append-outer-icon 會變成 append-icon -->
<v-text-field
    v-model="data"
    append-inner-icon="mdi-magnify">
</v-text-field>

<!-- vuetify 2-->
<!-- append-icon -->
<v-text-field
    v-model="data"
    append-icon="mdi-magnify">
</v-text-field>

6. 下拉選單相關 (v-select …)

<!-- vuetify 3 -->
<!-- item-title -->
<v-select
    v-model="data"
    item-title="text"
    item-value="value"
    :items="items">
</v-select>

<!-- vuetify 2-->
<!-- item-text -->
<v-select
    v-model="data"
    item-text="text"
    item-value="value"
    :items="items">
</v-select>

7. v-autocomplete

<!-- vuetify 3 -->
<!-- 自定義filter :custom-filter -->
<!-- 自定義選單內容 使用v-list-item就好，點擊事件綁 props ，取資料多一層 .raw-->
<v-autocomplete
    v-model="data"
    item-title="text"
    item-value="value"
    :items="items"
    :custom-filter="dataFilter">
    <template #item="{ props, item }">
        <v-list-item v-bind="props" :subtitle="item.raw.textEng"></v-list-item>
    </template>
</v-autocomplete>

// vuetify 3
// 自定義filter 接受參數value(item-value 綁定的值), 
// text(item-title 綁定的值), item(選取的整個資料)
// 要取得item資料 要使用 item.raw 取得
const dataFilter = (value: string, text: string ,item: ItemType) => {
    // todo something ...
}

<!-- vuetify 2-->
<!-- 自定義filter :filter -->
<!-- 自定義選單內容 使用v-list-item-content 包 v-list-item-title及
v-list-item-subtitle，不用綁點擊事件，取資料多一層 .item-->
<v-autocomplete
    v-model="data"
    item-text="text"
    item-value="value"
    :items="items"
    :filter="dataFilter">
    <template #item="data">
        <v-list-item-content>
            <v-list-item-title v-text="data.item.text"></v-list-item-title>
            <v-list-item-subtitle v-text="data.item.textEng"></v-list-item-subtitle>
        </v-list-item-content>
    </template>
</v-autocomplete>

// vuetify 2
// 自定義filter item(選取的整個資料) text(item-title 綁定的值)
const dataFilter = (item: ItemType, text: string) => {
    // todo something ...
}

8. v-menu, v-tooltip …等

<!-- vuetify 3 -->
<!-- 只需綁定 v-bind="props" (移除on屬性 attrs變成props) -->
<v-menu offset-y open-on-hover>
    <template #activator="{ props }">
        <v-chip
            v-bind="props">
            {{ data }}
        </v-chip>
    </template>
</v-menu>

<!-- vuetify 2-->
<!-- v-bind="attrs" v-on="on" -->
<v-menu offset-y open-on-hover>
    <template #activator="{ on, attrs }">
        <v-chip
            v-bind="attrs"
            v-on="on">
            {{ data }}
        </v-chip>
    </template>
</v-menu>

9. v-checkbox

<!-- vuetify 3 -->
<!-- v-model:input-value 沒有了-->
<v-checkbox
    v-model="data"
    :label="text"
    :value="value">
</v-checkbox>

<!-- vuetify 2-->
<!-- v-model:input-value="data" -->
<v-checkbox
    v-model:input-value="data"
    :label="text"
    :value="value">
</v-checkbox>

10. v-calendar，v-date-picker…等元件消失了(github上寫應該會在後續版本回歸)，但有 v-text-field type=”date” 可以使用

[Bug Report][3.0.3] v-date-picker doesn't exist · Issue #16191 · vuetifyjs/vuetify

[Feature Request] v-otp, v-calendar, v-date-picker not available in vuetify 3 · Issue #16817 ·…

<!-- vuetify 3 -->
<v-text-field
    v-model="birthday"
    type="date"
    :placeholder="出生日期">
</v-text-field>

11. v-simple-table 變成 v-table 且功能變少

https://vuetifyjs.com/en/components/tables/

12. v-tabs

<!-- vuetify 3 -->
<!-- v-window v-window-item-->
<v-tabs v-model="tab" grow>
    <v-tab>tab1</v-tab>
    <v-tab>tab2</v-tab>
</v-tabs>
<v-window v-model="tab">
    <v-window-item>
        <div>tab1</div>
    </v-window-item>
    <v-window-item>
        <div>tab2</div>
    </v-window-item>
</v-window>

<!-- vuetify 2-->
<!-- v-tabs-items v-tab-item-->
<v-tabs v-model="tab" grow>
    <v-tab>tab1</v-tab>
    <v-tab>tab2</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
    <v-tab-item>
        <div>tab1</div>
    </v-tab-item>
    <v-tab-item>
        <div>tab2</div>
    </v-tab-item>
</v-tabs-items>

13. v-btn with icon

<!-- vuetify 3 -->
<!-- variant="text"-->
<v-btn variant="text" color="primary" icon>
    <v-icon>mdi-file-document-outline</v-icon>
</v-btn>

<!-- vuetify 2-->
<!-- text-->
<v-btn text color="primary" icon>
    <v-icon>mdi-file-document-outline</v-icon>
</v-btn>