iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
1
Modern Web

Daily UI : 開發者版系列 第 30

Vuetify:Google YoutubeMusic › Advanced Implementation

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

我們可能都遇過有些特殊的響應式設計情境或細節,需透過 JS 處理會更好,而 Vueitfy 就有提供相關 API,讓你直接能在 JS 中調用,但這是雙面刃,建議讀者只在真正需要時,才透過這種方式處理。濫用帶來的負面影響真的蠻大的,最明顯的特徵就是會搞到很難維護,所以今天目標是仿製簡單的範例 Google YoutubeMusic,示範使用 JS 處理 RWD 的反模式( Anti Pattern )

在連續調整本日 Codepen 網頁寬度時,你可以發現一個明顯的 "響應式延遲現象"( 或是 Lag ),原因很簡單,因本日範例大多數是藉由 JS 製作響應式設計,遠不及透過原生的 CSS 處理(當然,對多數專案來說,這可能不重要),除此之外你可發現只是開發這麼簡單的版面,標籤碼已經非常亂,而這個雜亂的現象也無法透過使用 Vue SFC 解決( 當然你真要做一定做得到,只是會把問題搞得很複雜 )

我們稍微瀏覽一下,Vuetify 提供哪些 API 幫助我們處理響應式設計。首先是 CSS 端,它提供了一堆 class,例如 flex-sm-column( 所以你可猜到,sm 這個字串是可以改變的,例如改成 md, lg ... ),它的意思是當網頁寬度在 sm 這個尺寸( Vuetify 預設是 600 < w < 960,見 )時,把 flexbox 的排列方向改成縱向

很多 styling 的屬性都可透過結合諸如 Vuetify 預設的斷點作使用( e.g. pa-md-3, d-lg-block... )具體可至 Styles & animations 的章節中查閱,規則相當簡單。至於在 JS 端的相關 API 可在 Customization > Breakpoints 中找到,如 smAndUp 代表 sm 以上含 sm

new Vuetify({
    breakpoint: {
        thresholds: {
            xs: 514,   // < 514
            sm: 768    // 514 < w < 768
        }
    }
})

注意,若你想客製化斷點的預設值,目前 JS 和 CSS 端要分開改,也就是說你透過上面的 JS 做更改後,並不會影響 CSS 端的 API,以上述 flex-sm-column 為例,這時 sm 還是預設值!但其實不管要更改那部分的預設值,官方文件都有寫,見 Customization > Breakpoints

<template>
<v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
</v-dialog>
</template>

上一篇
Vuetify:Google YoutubeMusic › Static Layout
系列文
Daily UI : 開發者版30

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2018-11-14 11:54:13

/images/emoticon/emoticon07.gif
恭喜大大完賽,祝到美國一切順利/images/emoticon/emoticon42.gif

我要留言

立即登入留言