| | |
|---|
| | | @change="searchDistrict" |
|---|
| | | placeholder="請輸入關鍵字" |
|---|
| | | ></el-input> |
|---|
| | | <Ui-ScrollPicker |
|---|
| | | <Ui-ScrollPicker |
|---|
| | | :options="filterOptions" |
|---|
| | | :initValue="district" |
|---|
| | | @change="change" |
|---|
| | | @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 } from 'nuxt-property-decorator'; |
|---|
| | | import { Vue, Component, Emit } from 'nuxt-property-decorator'; |
|---|
| | | |
|---|
| | | @Component |
|---|
| | | export default class AddressPicker extends Vue { |
|---|
| | | |
|---|
| | | options = ['基隆市', '台北市', '新北市', '桃園縣', '新竹市', '新竹縣', '苗栗縣', '台中市', '彰化縣', '南投縣', '雲林縣', '嘉義市', '嘉義縣', '台南市', '高雄市', '屏東縣', '台東縣', '花蓮縣', '宜蘭縣', '澎湖縣', '金門縣', '連江縣']; |
|---|
| | | options = ['基隆市', '台北市', '新北市', '桃園市', '新竹市', '新竹縣', '苗栗縣', '台中市', '彰化縣', '南投縣', '雲林縣', '嘉義市', '嘉義縣', '台南市', '高雄市', '屏東縣', '台東縣', '花蓮縣', '宜蘭縣', '澎湖縣', '金門縣', '連江縣']; |
|---|
| | | keyWord = ''; |
|---|
| | | filterOptions: string[] = []; |
|---|
| | | district = '台北市'; |
|---|
| | |
|---|
| | | this.filterOptions = this.options.filter(e => e.match(this.keyWord)); |
|---|
| | | } |
|---|
| | | |
|---|
| | | change(value: string) { |
|---|
| | | console.log('change', value) |
|---|
| | | selectDistrict(value: string): void { |
|---|
| | | this.district = value; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @Emit('confirm') |
|---|
| | | confirm() { |
|---|
| | | return this.district; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
