今天開發的 FormAddPost 主要功能為 新增/修改 一篇文章的表單。

會用到之前寫的元件:

• TheMarkdown
• vue-codemirror
• PostPreview

以及 vuetify 的元件:

• v-switch
• v-text-field
• v-combobox
• v-chip

至於表單驗證的部分，會選用到上一篇介紹的 simple-vue-validator。

使用 plop 新建元件 FormAddPost

npm run plop
# 輸入 FormAddPost

截圖：

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

開始開發 FormAddPost 元件

因為程式碼比較多以下會拆成幾個部分逐一解釋

從元件名稱可以看出這個是一個表單，
主要結構有 5 個輸入、 2 個預覽：

輸入：

• v-switch (是否顯示本篇文章)
• v-text-field (本篇文章標題)
• v-combobox (本篇文章所需的 tags)
• codemirror (輸入本文章預覽的內容)
• codemirror (輸入本文章的內容)

預覽：

• ThePreviewText (預覽本文章預覽的內容)
• TheMarkdown (預覽本文章的內容)

v-switch (是否顯示本篇文章)

開關，提供作者暫時先關閉未完成的文章。

不顯示文章：

顯示文章：

v-text-field (本篇文章標題)

輸入文章標題，並透過 props: error, error-messages 驗證表單。

驗證邏輯：

初始狀態：

驗證通過：

驗證未通過：

v-combobox (本篇文章所需的 tags)

驗證邏輯：

初始狀態：

驗證通過：

驗證未通過：

codemirror (輸入本文章預覽的內容)

利用 vue-codemirror 提供的元件，輸入 markdown，
並用 PostPreview 元件，預覽文章。

驗證邏輯：

驗證通過：

驗證未通過：

預覽：

codemirror (輸入本文章的內容)

驗證邏輯：

驗證通過：

驗證未通過：

預覽：

程式碼放在以下 branch：

020-FormAddPost

指令：

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