Vant3 Area 省市區(qū)選擇

介紹

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

實(shí)例演示

引入

通過以下方式來全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

const app = createApp();
app.use(Area);

代碼演示

基礎(chǔ)用法

初始化省市區(qū)組件時(shí)，需要通過 area-list 屬性傳入省市區(qū)數(shù)據(jù)。

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

areaList 格式

areaList 為對(duì)象結(jié)構(gòu)，包含 province_list、city_list、county_list 三個(gè) key。

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

示例數(shù)據(jù)如下：

const areaList = {
  province_list: {
    110000: '北京市',
    120000: '天津市',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
  },
  county_list: {
    110101: '東城區(qū)',
    110102: '西城區(qū)',
    // ....
  },
};

@vant/area-data

Vant 官方提供了一份默認(rèn)的省市區(qū)數(shù)據(jù)，可以通過 @vant/area-data 引入：

yarn add @vant/area-data

import { areaList } from '@vant/area-data';

export default {
  setup() {
    return { areaList };
  },
};

選中省市區(qū)

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

<van-area title="標(biāo)題" :area-list="areaList" value="110101" />

配置顯示列

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

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

配置列占位提示文字

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

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

API

Props

Events

ConfirmResult 格式

confirm 事件返回的數(shù)據(jù)整體為一個(gè)數(shù)組，數(shù)組每一項(xiàng)對(duì)應(yīng)一列選項(xiàng)中被選中的數(shù)據(jù)。

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

Slots

方法

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

類型定義

通過 AreaInstance 獲取 Area 實(shí)例的類型定義。

import { ref } from 'vue';
import type { AreaInstance } from 'vant';

const areaRef = ref<AreaInstance>();

areaRef.value?.reset();

常見問題

在桌面端無法操作組件？

參見桌面端適配。