iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
1

~~快要爆炸啦~~
~~最近要趕工作~~
~~快要齁不住了~~

今天來寫一個文章摘要預覽的元件,主要有兩種模式:

  1. default: 使用者會看到的模式。
  2. admin: 可供編輯的模式,會多一個 switch 供作者切換是否顯示該文章。

建議去看一下第 13~16 天,這個元件會用到之前開發的兩個元件分別為:

  1. TheTags
  2. TheMarkdown

使用 plop 新建元件 ThePostPreview

npm run plop
# 輸入 ThePostPreview

截圖:

017-001

這樣就輕鬆建立好一個新的元件了。

開始開發 ThePostPreview 元件

這個元件就比之前的稍微複雜一點,
也有用到 vuetify 的元件:

template(pug):

下面程式碼可以看到:
整個元件是透過 v-card 組成,
並利用 vuetify 內建的 class 來切版,例如:

mt-3 ,grey ,darken-4 ,pb-0 ,pl-2 ,display-1 ,grey--text ,text--lighten-2 ,body-1 ,my-1 ,my-3

這些都是在調整排版、顏色、字體大小而已,用習慣了之後應該會看得非常輕鬆。

另外透過 props isAdmin 來判斷 nuxt-link 要導頁至編輯文章或觀看文章。

017-004

script:

這邊簡單分為 7 個 props:

  • id: 文章的 id
  • isAdmin: 切換(admin 或 default 模式)
  • title: 文章標題
  • lastUpdateTime: 文章更新 timestamp
  • previewContent: 文章摘要
  • tags: 文章標籤
  • isShow: 是否顯示文章

另外 showText 為計算本文章狀態為顯示中或未發佈。

017-005

style(stylus)

幾行簡單樣式而已不解釋。

017-006

date 日期 filter

可以看到 template 中有用到日期的 filter

目的為將 timestamp 轉為顯示格式: 10.Oct 2018

import Vue from 'vue'

// 定義月份字串
const months = [
  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
const dateFilter = value => {
  return formatDate(value)
}

// 將時間格式化
function formatDate (inputDate) {
  const date = new Date(inputDate)
  const year = date.getFullYear()
  const month = date.getMonth()
  const day = date.getDate()
  const formattedDate = day + '. ' + months[month] + ' ' + year
  return formattedDate
}

Vue.filter('date', dateFilter)

接著要記得將這個 filters/date.js 引入到 nuxt.config.js:

plugins: [
  '@/plugins/filters/date.js'
]

storybook 截圖:

default(使用者預覽模式):

017-002

admin(使用者預覽模式):

017-003

程式碼放在以下 branch:

017-ThePostPreview

指令:

git clone -b 017-ThePostPreview --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run storybook

上一篇
#16 元件開發: TheMarkdown 自定義樣式
下一篇
#18 套件安裝及設定: vue codemirror
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30

尚未有邦友留言

立即登入留言