iT邦幫忙

2024 iThome 鐵人賽

DAY 14
0
佛心分享-SideProject30

NUXT3xVUE3xPINIA: 從零開始寫電商系列 第 28

[Day 28] CSS,繼續刻元件

  • 分享至 

  • xImage
  •  

今天刻product會用到的elements,有改了一點功能(T_T)所以程式面也有花時間小修一點

目錄

  • Product
    • productItem
    • Filter

Product

productItem的部分,我把rating的星星單獨拉出來做component,只要丟rating的值(props)到rating的component裡,就會自動計算星星應該要有幾分之幾是亮的。然後RWD也做好了,以下是成果:


Filter的UI有點小改變(真善變啊~),改成filter下拉選單只要change就直接搜尋;而input那邊,只要文字超過三個字就搜尋,不過這邊有用throttle來減少搜尋以降低效能,為什麼用throttle而不是debounce呢?因為我喜歡每隔一段時間就顯示資訊,而非整個寫完後(或是停頓一段時間後)才有資訊的概念(但我覺得這種事很主觀,也許明天我就覺得debounce比較好(X))

閒聊碎碎念

如果第14天沒有因為儲存草稿而沒送出所以鐵人挑戰失敗,昨天也算是失敗了,下班後真的精疲力盡,加上上禮拜真的忙到有空閒也不想動腦子T_T期許用自己今年的一些經驗明年再參加一次,今年沒什麼規劃,當時就想著參加,整體來說覺得自己整個系列的內容規劃好像都散散的。今年的專案我還是會寫完,我還有些一邊趕著寫,一邊覺得好想重寫喔。照現在進度應該會寫超過30天吧XD

下個月要去班夫banff,滿期待的~畢竟來加拿大沒去一下班夫就好像白來了,明天繼續加油!!


上一篇
[Day 27] 開始刻畫面 - Navbar (mobile)
下一篇
[Day 29] CSS - Login/Regis Pages
系列文
NUXT3xVUE3xPINIA: 從零開始寫電商29
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言