iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0
Modern Web

Daily UI : 開發者版系列 第 26

Vuetify:Google News › Advanced Implementation

https://codepen.io/hereiscasio/pen/eYOomxO?editors=1010

延續昨天的程式碼,今天專門介紹 Vue-portal,它來自於 React 的 Protal,只不過是 Vue 的版本,由 Vue 的一個 core team member 維護,但並非像 React 一樣,屬於 Vue 的核心功能,這是可以理解的,因為 Vue 連 http lib 都建議拿第三方的來用,更別說這個相當進階( 甚至我覺得這個東西在實際使用上 . . . 有時要很有創意 . . . 但太有創意似乎不是件好事啊 )的 Vue-portal

這個第三方套件跟 Vuetify 有什麼關係呢?其實一點關係都沒有,只是因為用了它,程式碼有簡化一定幅度,並且我也想在這個系列文中,把 Vuetify 跟其它第三方套件做整合示範。這個套件的作用就是你先把一些標籤定義在 <portal> 裡,並指定它去把這些標籤塞到某個 <portal-target> 裡,所以簡單來講就是定義在 portal 裡面的東西,通常是有實際需要被複用

那 . . . Google News 裡面哪些東西需要被復用?很明顯每張卡片是重複的,但這部分靠 v-for 就能處理掉了,還沒必要用上 Vue-portal( i.e. 沒事別亂用 Vue-portal,這也是雙面刃,亂用很容易把事情複雜化,一般是不太會用到才是 ),另一個重複的元素其實就是每張卡片裡面的標題( 及標題下方的小字 )

這些元素雖然是重複的,但在卡片中的這種元素第一個,右邊有圖片,字體較大並且還是粗體,這暗示了一件事,這些元素要是再次透過 v-for 處理,你等於是造了在 Vue template 裡面製造了曹狀 for 迴圈,而且還要加很多判斷式做處理,要搞一定搞得出來,只是這樣會很難維護,這時就要透過其它方式( 因為 Codepen 無法使用 Vue SFC,所以我才會選擇 Vue-portal

<portal to='headlineArchitecture'>
    <template slot-scope='{title, subTitle, hover}'>
        <span>{{title}}</span>
        <span>{{subTitle}}</span>
        <v-row v-if='hover'> ... </v-row> 
    </template>
</portal>

<portal-target
    name='headlineArchitecture' :slot-props='{hover, title: ..., subTitle: ...}'>
</portal-target>

所以這個 portal 會把這些標籤渲染到名為 headlineArchitecture<portal-target>,值得一提的是,我們是使用了 portal 進階版的功能:透過傳給地不同的 slot props( 如 title, subTitle ),可以渲染出不同的內容


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

尚未有邦友留言

立即登入留言