CityPicker

城市联动选择组件 / CityPicker组件

简述

这是一个二级/三级联动进行城市选择的组件, 数据获取可修改fetchData函数进行, 可以是本地数据也可以是网络数据.

fetchData函数

fetchData函数用于根据code获取picker单列的数据, 这部分由业务确定, 有些情况需要使用本地数据, 有时是网络数据. 函数参考下面的用法, 需要在返回的数组中包含的对象格式是:

名称 / Name 类型 / Type 描述 / Description
text string 显示的文本
value * 对显示文本的值
disabled boolean 是否禁用

如何引入

import CityPicker from 'vimon'
源码:

传入属性 / Props:

Name Type Attributes Default Description
selectedCity Array 默认选中的值, 这个也对应组件是两级还是三级的标志, 可以是数据: ['',''] ['','',''], 默认显示北京
startCode String/Number <optional>
 '1' 获取省份数据的code值, 默认是 中国 1
onCancel function <optional>
 点击取消的操作
onSelect function <optional>
 点击确认的操作
fetchData function 获取城市数据的来源, 这个funtion传入code返回promise格式的数据, 其中需要返回的数据格式如下

用法 / Usages

function openCityPicker () {
   CityPicker.present({
     onSelect (data) {
       console.log('onSelect')
       console.log(data)
     },
     onCancel () {
       console.log('onCancel')
     },
     startCode: '1',
     selectedCity: ['', ''],
     fetchData (code) {
       return new Promise((resolve, reject) => {
         if (code) {
           axios(`static/address-data/${code}.json`)
           .then((response) => {
             response.data.forEach((item) => {
               item.text = item.divisionName
               item.value = item.divisionCode
               item.disabled = false
             })
             resolve(response.data)
           })
           .catch(() => {
             resolve([])
             console.error('无法获取数据')
           })
         } else {
           resolve([])
           console.error('没有查询的code值')
         }
       })
     }
   })
 }