TODO#129877 嚴選配對-所在地區元件 (vue-scroll-picker)

Mila

2021-11-08 d580f29634971b282b06b5760d2c633907058b45

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template>
    <div class="text--center">
        <div class="subTitle mb-10">所在地區</div>
        <el-input
            type="text"
            class="p mt-10"
            v-model="keyWord"
            @change="searchDistrict"
            placeholder="請輸入關鍵字"
        ></el-input>
       <Ui-ScrollPicker
            :options="filterOptions"
            :initValue="district"
            @change="change"
        ></Ui-ScrollPicker>
    </div>
</template>
 
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';
 
@Component
export default class AddressPicker extends Vue {
 
    options = ['基隆市', '台北市', '新北市', '桃園縣', '新竹市', '新竹縣', '苗栗縣', '台中市', '彰化縣', '南投縣', '雲林縣', '嘉義市', '嘉義縣', '台南市', '高雄市', '屏東縣', '台東縣', '花蓮縣', '宜蘭縣', '澎湖縣', '金門縣', '連江縣'];
    keyWord = '';
    filterOptions: string[] = [];
    district = '台北市';
 
    mounted() {
        this.filterOptions = JSON.parse(JSON.stringify(this.options));
    }
 
    searchDistrict() {
        this.filterOptions = this.options.filter(e => e.match(this.keyWord));
    }
 
    change(value: string) {
        console.log('change', value)
    }
}
</script>
 
<style lang="scss" scoped>
    .cus-input {
        font-size: 20px;
    }
</style>