| | |
| | | <template> |
| | | <div class="text--center"> |
| | | <div class="subTitle mb-10">所在地區</div> |
| | | <div class="subTitle mb-10">服務地區</div> |
| | | <el-input |
| | | type="text" |
| | | class="p mt-10 cursor--pointer " |
| | | class="p mt-10 cursor--pointer input-radius" |
| | | tabindex="-1" |
| | | v-model="keyWord" |
| | | @change="searchDistrict" |
| | | @input="searchDistrict" |
| | | placeholder="請輸入關鍵字" |
| | | ></el-input> |
| | | <Ui-ScrollPicker |
| | |
| | | <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 = ['基隆市', '台北市', '新北市', '桃園市', '新竹市', '新竹縣', '苗栗縣', '台中市', '彰化縣', '南投縣', '雲林縣', '嘉義市', '嘉義縣', '台南市', '高雄市', '屏東縣', '台東縣', '花蓮縣', '宜蘭縣', '澎湖縣', '金門縣', '連江縣']; |
| | | keyWord = ''; |
| | | options : string[] = taiwanCities; |
| | | keyWord : string = ''; |
| | | filterOptions: string[] = []; |
| | | district = '台北市'; |
| | | 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)); |
| | |
| | | this.district = value; |
| | | } |
| | | |
| | | @Emit('confirm') |
| | | confirm() { |
| | | return this.district; |
| | | } |
| | | |
| | | |
| | | } |
| | | </script> |