今日開發紀錄

今天開發時間只有大約一小時，主要的目標是要開始將月曆選取的功能加上，可以像一般的記帳程式一樣，點擊上方月曆中的每一個日期，就能對應到下方當日的記帳列表，開發內容如下：

• 加上月曆。
• 在新增紀錄表單中加上日期欄位。
• 調整記帳清單的版面，使其能稍微做到 RWD。

開發筆記

版面大致優化到可以舒服開發的程度後，接下來的目標就是繼續完成記帳功能了！那月記帳本最重要的月曆就是接下來努力的目標了。

因為有用 Element UI，首先當然試試看現成的 el-calendar ：

這個...實在是無法接受，看文件這個元件做的很簡陋，也沒有留屬性可以調整 size 與其他客製樣式，試著觀察了一下結構並調整其中的 CSS，其實結構也就只是一個 table，好像也不難刻。

由於這個實在太難用了，突然想到幾個月前面試時有一題自己手刻了一個 calendar 與 datepicker：

• Demo
• 開發筆記

所以就將這個 component 當成一個 ui kit 引入專案中，順便記錄一下，在 Vue 專案中常常會用到的全站共用元件寫法好了，不太熟常常會忘。

Vue 全站共用元件註冊

首先在 /plugins 底下加上一個檔案，這邊取名為 ui-kits.js：

import Vue from 'vue'
import Calendar from '@/components/Calendar'

Vue.component('Calendar', Calendar)

裡面內容非常簡單，就是將要用的元件引入後，並用 Vue.component() 來註冊讓全站使用。

記得這個 /plugins/ui-kits.js 檔案要在專案中引入，以 Vue CLI 專案為例通常是根目錄的 main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import '@/assets/styles/main.scss'
import './plugins/ui-kits.js' // 加上這行

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

這樣就完成註冊囉！於是之後就可以在全站直接使用這個元件，而不用每次要用時，還要在那個地方的 .vue 檔中另外註冊。

於是在全站註冊完 Calendar 元件後，就可以在我的 BillingCalendar 中使用：

<div id="ct-billing-calendar">
  <calendar
    :date="selectedDate"
    :onSelect="onSelect"
  />
</div>

今天先到這，明天繼續來把月曆跟記帳清單串起來！