[Day 23] 实作-搜寻表单 v-expansion-panels

昨天设计完介面了，

今天就是做前端啦，建立新页面跟放上面的header照片，之前都讲过了

Expansion panels 扩展面板

这次来记录一下，怎麽制作搜寻表单，会用到 Expansion panels 这个组件

按照惯例，先挑一个类似的范例来改，这个进阶用法就很适合，展开後的面板可以放输入栏位

完美的套用啦~

在选单里输入日期，收合栏位後，会把输入的结果放到上方

还蛮特别的！就照他这个概念做好了

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>