Vant Area 省市區(qū)選擇

介紹

省市區(qū)三級(jí)聯(lián)動(dòng)選擇，通常與 彈出層 組件配合使用

引入

import Vue from 'vue';
import { Area } from 'vant';

Vue.use(Area);

代碼演示

基礎(chǔ)用法

要初始化一個(gè)Area組件，你需要傳入一個(gè)area-list屬性，數(shù)據(jù)格式具體可看下面數(shù)據(jù)格式章節(jié)

<van-area :area-list="areaList" />

選中省市區(qū)

如果想選中某個(gè)省市區(qū)，需要傳入一個(gè)value屬性，綁定對(duì)應(yīng)的省市區(qū)code

<van-area :area-list="areaList" value="110101" />

配置顯示列

可以通過(guò)columns-num屬性配置省市區(qū)顯示的列數(shù)，默認(rèn)情況下會(huì)顯示省市區(qū)，當(dāng)你設(shè)置為2，則只會(huì)顯示省市選擇

<van-area :area-list="areaList" :columns-num="2" title="標(biāo)題" />

配置列占位提示文字

可以通過(guò)columns-placeholder屬性配置每一列的占位提示文字

<van-area
  :area-list="areaList"
  :columns-placeholder="['請(qǐng)選擇', '請(qǐng)選擇', '請(qǐng)選擇']"
  title="標(biāo)題"
/>

API

Props

Events

方法

通過(guò) ref 可以獲取到 Area 實(shí)例并調(diào)用實(shí)例方法，詳見(jiàn) 組件實(shí)例方法

省市區(qū)列表數(shù)據(jù)格式

整體是一個(gè) object，包含 province_list, city_list, county_list 三個(gè) key。

每項(xiàng)以省市區(qū)編碼作為 key，省市區(qū)名字作為 value。編碼為 6 位數(shù)字，前兩位代表省份，中間兩位代表城市，后兩位代表區(qū)縣，以 0 補(bǔ)足 6 位。如北京編碼為 11，以零補(bǔ)足 6 位，為 110000。

AreaList具體格式如下：

{
  province_list: {
    110000: '北京市',
    120000: '天津市'
  },
  city_list: {
    110100: '北京市',
    110200: '縣',
    120100: '天津市',
    120200: '縣'
  },
  county_list: {
    110101: '東城區(qū)',
    110102: '西城區(qū)',
    110105: '朝陽(yáng)區(qū)',
    110106: '豐臺(tái)區(qū)'
    120101: '和平區(qū)',
    120102: '河?xùn)|區(qū)',
    120103: '河西區(qū)',
    120104: '南開(kāi)區(qū)',
    120105: '河北區(qū)',
    // ....
  }
}

完整數(shù)據(jù)見(jiàn) Area.json

點(diǎn)擊完成時(shí)返回的數(shù)據(jù)格式

返回的數(shù)據(jù)整體為一個(gè)數(shù)組，數(shù)組內(nèi)包含 columnsNum 個(gè)數(shù)據(jù)， 每個(gè)數(shù)據(jù)對(duì)應(yīng)一列選項(xiàng)中被選中的數(shù)據(jù)。

code 代表被選中的地區(qū)編碼， name 代表被選中的地區(qū)名稱(chēng)

[
  {
    code: '110000',
    name: '北京市'
  },
  {
    code: '110100',
    name: '北京市'
  },
  {
    code: '110101',
    name: '東城區(qū)'
  }
];

常見(jiàn)問(wèn)題

在桌面端無(wú)法操作組件？

參見(jiàn)在桌面端使用。