Features

文章 list item

• 可以接受一個自訂連結，使得整塊 list item 被點擊後有導引至其他頁的行為。
• 點擊時需送出以下 GA event：
  • action: click
  • category: listing
  • label: latest
• 圖片區
  • 可以顯示一張圖片。
    • 圖片必須可以 lazyload。
  • 圖片左下角可以配有一輔助文字區塊，且此區塊可有不同底色。
• 文字資訊區
  • 可以顯示大標，不限字數與行數。
  • 可以顯示文字敘述，限定最多三行，多則以 ... 處理。
  • （供廣告使用）可以接受不同的底色。

Specs

文章 list item

• 有一個 div tag
  • 點擊時判斷 props href 之值：
    • 若為 '^https?://' 則另開網頁，網址為 props href。
    • 否則 router.push(href)
• trigger click event 時：
  • 需送出以下 GA event：
    • action: click
    • category: listing
    • label: latest
• 圖片區
  • 有一個 img tag
    • 因搭配 vue-lazyload，故 data-src 應為 props imgSrc 之值。
  • 有一個 span tag
    • textContent 應為 props imgText 之值。
    • backgroudColor 應為 props imgTextBackgroundColor 之值。
      • 需注意 vue 的 style binding 會將 hex 自動轉換為 rgb。
• 文字資訊區
  • 有一個 h1 tag
    • textContent 應為 props infoTitle 之值。
  • 有一個 p tag
    • textContent 應為 props infoDescription 之值。
  • backgroudColor 應為 props infoBackgroundColor 之值。