iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
Modern Web

前端?後端?你早晚都要全端的,何不從現在開始?系列 第 23

[Day 23] 實作-搜尋表單 v-expansion-panels

昨天設計完介面了,

https://ithelp.ithome.com.tw/upload/images/20211008/20140745llqeoEqhg7.png

今天就是做前端啦,建立新頁面跟放上面的header照片,之前都講過了


Expansion panels 擴展面板

這次來記錄一下,怎麼製作搜尋表單,會用到 Expansion panels 這個組件

https://ithelp.ithome.com.tw/upload/images/20211008/20140745AsHufWHZy7.png

按照慣例,先挑一個類似的範例來改,這個進階用法就很適合,展開後的面板可以放輸入欄位

https://ithelp.ithome.com.tw/upload/images/20211008/20140745SFfkcCac05.png

完美的套用啦~

在選單裡輸入日期,收合欄位後,會把輸入的結果放到上方

https://ithelp.ithome.com.tw/upload/images/20211008/20140745m91TNe0BJv.png

還蠻特別的! 就照他這個概念做好了


v-expansion-header

先從header開始,這邊有綁定open這個屬性,判斷展開跟收合

收合的時候要顯示 搜尋,展開的時候要顯示 關閉

那下方我改成收合時,如果有填寫搜尋欄位,會把它顯示出來

<v-expansion-panel-header 
		v-slot="{ open } " 
		color="cyan darken-2" 
		class="white--text"
>
    <v-row>
        <v-col cols="12" class="text-center">
            <h3 v-if="!open"> <!-- 如果收合時要顯示"搜尋" -->
                搜尋
                <v-icon color="white">add_circle_outline</v-icon>
            </h3>
            <h3 v-else> <!-- 否則顯示"關閉" -->
                關閉
                <v-icon color="white">cancel</v-icon>
            </h3>
        </v-col>
        <v-col cols="12">
            <v-fade-transition leave-absolute>
                <v-row no-gutters style="width: 100%" v-if="!open"> <!-- 收合時要顯示搜尋的字 -->
                    <v-col cols="3">
                        關鍵字: {{ form.keyword}}
                    </v-col>
                    <v-col cols="6">
                        活動日期範圍:
                        {{form.start}}{{ form.end && ' ~ '}}{{form.end}}
                    </v-col>
                    <v-col cols="3">
                        地點: {{ form.location || ''}}
                    </v-col>
                </v-row>
            </v-fade-transition>
        </v-col>
    </v-row>
</v-expansion-panel-header>

搜尋日期 v-date-picker

這邊使用的是 DatePicker 這個組件

會分成二個部分,一個是 TextField,不過會設定成readonly,也就是僅能讀、禁止輸入,並且用v-model綁定參數。

第二個就是點擊後會跳出的日期選單,這個套件已經把會用到的東西都寫好了,直接用一個<v-data-picker>,就可以實作出選單,點選ok後,會選擇的日期帶入input欄位

<v-menu 
    ref="startMenu" 
    :close-on-content-click="false" 
    :return-value.sync="form.start" 
    offset-y min-width="290px"
>
    <template v-slot:activator="{ on, attrs }">
        <v-text-field 
            v-model="form.start" 
            label="開始日期" 
            readonly 
            v-bind="attrs" 
            v-on="on" 
            clearable>
        </v-text-field>
    </template>
    <v-date-picker v-model="date" no-title scrollable>
        <v-spacer></v-spacer>
        <v-btn 
            text 
            color="grey" 
            @click="$refs.startMenu.isActive = false"
        >
            Cancel
        </v-btn>
        <v-btn 
            text 
            color="primary"
            @click="$refs.startMenu.save(date)"
        >
            OK
        </v-btn>
    </v-date-picker>
</v-menu>

選擇地區 v-comboBox

這邊需要先準備一個地區的List,然後用迴圈渲染出v-checkbox

:label 是框框右邊的文字

:value 是框框實際的值

v-model 如果多個checkbox綁定同一個參數,可以共用這個參數,詳情可參考官方教學

locations: ['臺北市', '基隆市', '新北市', '宜蘭縣', '桃園市', '新竹市', '新竹縣', '苗栗縣', '臺中市', '彰化縣', '南投縣', '雲林縣', '嘉義縣', '嘉義市', '臺南市', '高雄市', '屏東縣', '澎湖縣', '花蓮縣', '台東縣', '金門縣', '連江縣'],
<v-col cols="10">
    {{ form.location }}
    <v-row>
      <v-col xl="1" md="2" sm="3" xs="4"
             v-for="item in locations" <!-- 用v-for 迴圈渲染地區字段 -->
             v-bind:key="item">
        <v-checkbox
          class="mt-0"
          v-model="form.location" <!-- 多個 v-checkbox如果綁定同一個v-model,可以共用參數 -->
          :label="item"
          :value="item"
          hide-details
        />
      </v-col>
    </v-row>
  </v-col>

完整程式碼

請參考 GitHub

組件 FestivalPage.vue

成果展示

https://ithelp.ithome.com.tw/upload/images/20211008/20140745NdqBO7kFbF.png

https://ithelp.ithome.com.tw/upload/images/20211008/20140745i3y2RtWWni.png


今天先到這邊~

明天繼續實作下方的活動列表


上一篇
[Day 22] 節慶活動 api分析&頁面設計
下一篇
[Day 24] 實作-日期格式轉換 字串長度限制
系列文
前端?後端?你早晚都要全端的,何不從現在開始?31

尚未有邦友留言

立即登入留言