Area 省市区选择 ​

介绍 ​

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

引入 ​

js
import { createApp } from 'vue';
import { Area } from '@szhn/dh-design-mobile';

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

代码演示 ​

基础用法 ​

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

html
<van-area title="标题" :area-list="areaList" @confirm="onConfirm" />

选中省市区 ​

如果想选中某个省市区，需要传入一个 value 属性，绑定对应的地区编码。

html
<van-area title="标题" :area-list="areaList" value="330103" @confirm="onConfirm" />

配置显示列数 ​

通过 columns-num 属性配置省市区显示的列数，默认情况下会显示省市区三列。

html
<van-area title="标题" :area-list="areaList" :columns-num="2" @confirm="onConfirm" />

API ​

Props ​

参数说明类型默认值
v-model当前选中的省市区 codestring-
title顶部栏标题string-
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
area-list省市区数据object-
columns-placeholder列占位提示文字string[][]
loading是否显示加载状态booleanfalse
readonly是否为只读状态booleanfalse
columns-num显示列数number | string3
visible-option-num可见的选项个数number | string6
swipe-duration快速滑动时惯性滚动的时长number | string1000