<template>
|
<div class="text--center">
|
<div class="subTitle mb-10">服務地區</div>
|
<el-input
|
type="text"
|
class="p mt-10 cursor--pointer input-radius"
|
tabindex="-1"
|
v-model="keyWord"
|
@input="searchDistrict"
|
placeholder="請輸入關鍵字"
|
></el-input>
|
<Ui-ScrollPicker
|
:options="filterOptions"
|
:initValue="district"
|
@change="selectDistrict"
|
></Ui-ScrollPicker>
|
<div class="text--center mt-10">
|
<el-button type="primary" @click="confirm">確認</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Emit } from 'nuxt-property-decorator';
|
|
import { taiwanCities } from '~/shared/const/taiwan-cities';
|
|
@Component
|
export default class AddressPicker extends Vue {
|
|
options : string[] = taiwanCities;
|
keyWord : string = '';
|
filterOptions: string[] = [];
|
district : string = '台北市';
|
|
//////////////////////////////////////////////////////////////////////
|
|
mounted() {
|
this.filterOptions = JSON.parse(JSON.stringify(this.options));
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
@Emit('confirm')
|
confirm(): string {
|
return this.district;
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
searchDistrict() {
|
this.filterOptions = this.options.filter(e => e.match(this.keyWord));
|
}
|
|
selectDistrict(value: string): void {
|
this.district = value;
|
}
|
|
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.cus-input {
|
font-size: 20px;
|
}
|
</style>
|
