今天要來切台鐵功能的模擬UI，由於此功能頁面頗多，所以我們使用 Vue UI 來切版

首先我們要實現的是搜尋時刻功能，所以我們要先切出三個畫面的版

就沿用之前番茄鐘的CSS來用了

依時刻查詢

依車站

依車次編號

用了 compment 以及 emit 節省頁面程式碼

HTML

<div id="app">
  <Titles :current="currentPage" @switch-page="switchPage"></Titles>
  <hr />
  <div>
    <div class="row" v-show="currentPage === 'time'" >
        <label>出發站</label>
        <select></select>
    </div>
    <div class="row" v-show="currentPage === 'time'">
        <label>抵達站</label>
      <select></select>
    </div>
    <div class="row">
        <label>查詢日期</label>
        <input type="date" />
    </div>
    <div class="row" v-show="currentPage === 'time'">
        <label>查詢時間</label>
        <select class="time"></select> ~ 
        <select class="time"></select>
    </div>
    <div class="row" v-show="currentPage === 'station'">
        <label>查詢車站</label>
      <select></select>
    </div>
    <div class="row" v-show="currentPage === 'trainno'">
        <label>查詢車次</label>
        <input type="text" />
    </div>
    <div class="row" v-show="currentPage === 'time'">
      <label>車種</label>
      <div class="input-grid">
        <input type="radio" checked>全部
        <input type="radio">對號
        <input type="radio">非對號
      </div>
    </div>
    <div class="row">
        <div class="btn btn-blue">查詢</div>
        <div class="btn btn-white">初始化</div>
    </div>
  </div>
</div>

Script

Vue.component('Titles', {
  props:['current'],
  data(){
    return {
      data:{
        time: '依時刻',
        station: '依車站',
        trainno: '依車次'
      }
    }
  },
  computed:{
    others(){
      return Object.keys(this.data).filter(item=>item !== this.current) 
    } 
  },
  methods:{
    switchPage(page){
      this.$emit('switch-page',page)
    }
  },
  template: `
  <div class="titles">
    <span>{{data[current]}}</span>
    <a v-for="key in others" :key="key" @click="switchPage(key)">{{data[key]}}</a>
  </div>`
})

var app = new Vue({
  el: '#app',
  data(){
    return {
      currentPage: 'time',
      title: '依時刻查詢'
    }
  },
  methods:{
    switchPage(page){
      this.currentPage = page
    }
  }
})

接下來只要copy到chrome extension就完成了，
稍後我會再整理一下靜態資料，明天再用chrome API來管理資料與取用，
今天就先這樣吧～