业务组件

2024-07-13 11:35| 来源: 网络整理| 查看: 265

Area 省市区选择介绍引入代码演示基础用法areaList 格式@vant/area-data控制选中项配置显示列配置列占位提示文字APIPropsEventsSlots方法类型定义常见问题在桌面端无法操作组件？Area 省市区选择介绍

省市区三级联动选择，通常与弹出层组件配合使用。

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';import { Area } from 'vant';const app = createApp();app.use(Area);代码演示基础用法

初始化省市区组件时，需要通过 area-list 属性传入省市区数据。

areaList 格式

areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

示例数据如下：

const areaList = { province_list: { 110000: '北京市', 120000: '天津市', }, city_list: { 110100: '北京市', 120100: '天津市', }, county_list: { 110101: '东城区', 110102: '西城区', // .... },};@vant/area-data

Vant 官方提供了一份默认的中国省市区数据，可以通过 @vant/area-data 引入：

# 通过 npmnpm i @vant/area-data# 通过 yarnyarn add @vant/area-data# 通过 pnpmpnpm add @vant/area-dataimport { areaList } from '@vant/area-data';export default { setup() { return { areaList }; },};

Tips: 中国的行政区划每年都会有变动，如果发现省市区数据未及时更新，欢迎提 Pull Request 帮助我们更新。你可以在「国家统计局 - 全国区划代码」和「民政部 - 行政区划代码」上查询到最新数据，请根据官方数据进行核实。

控制选中项

通过 v-model 绑定当前选中的地区码。

import { ref } from 'vue';export default { setup() { const value = ref('330302'); return { value }; },};配置显示列

可以通过 columns-num 属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为 2，则只会显示省市选择。

配置列占位提示文字

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

APIProps参数说明类型默认值v-model当前选中项对应的地区码string-title顶部栏标题string-confirm-button-text确认按钮文字string确认cancel-button-text取消按钮文字string取消area-list省市区数据，格式见下方object-columns-placeholder列占位提示文字string[][]loading是否显示加载状态booleanfalsereadonly是否为只读状态，只读状态下无法切换选项booleanfalseoption-height选项高度，支持 px vw vh rem 单位，默认 pxnumber | string44columns-num显示列数，3-省市区，2-省市，1-省number | string3visible-option-num可见的选项个数number | string6swipe-duration快速滑动时惯性滚动的时长，单位 msnumber | string1000 Events事件说明回调参数confirm点击完成按钮时触发{ selectedValues, selectedOptions }cancel点击取消按钮时触发{ selectedValues, selectedOptions }change选项改变时触发{ selectedValues, selectedOptions, columnIndex } Slots名称说明参数toolbar v3.1.2自定义整个顶部栏的内容-title自定义标题内容-confirm v3.1.2自定义确认按钮内容-cancel v3.1.2自定义取消按钮内容-columns-top自定义选项上方内容-columns-bottom自定义选项下方内容- 方法

通过 ref 可以获取到 Area 实例并调用实例方法，详见组件实例方法。

方法名说明参数返回值confirm停止惯性滚动并触发 confirm 事件--getSelectedOptions获取当前选中的选项-PickerOption[] 类型定义

组件导出以下类型定义：

import type { AreaProps, AreaList, AreaInstance } from 'vant';

AreaInstance 是组件实例的类型，用法如下：

import { ref } from 'vue';import type { AreaInstance } from 'vant';const areaRef = ref();areaRef.value?.confirm();常见问题在桌面端无法操作组件？

参见桌面端适配。

【本文地址】

公司简介

联系我们