Address 地址

介绍

地址相关组件，包含地址编辑组件 AddressEdit 和地址列表组件 AddressList。

引入

import { createApp } from 'vue';
import { Address, AddressEdit, AddressList } from '@szhn/dh-design-mobile';

const app = createApp();
app.use(Address);
app.use(AddressEdit);
app.use(AddressList);

代码演示

地址列表

通过 list 和 disabled-list 属性设置可用和不可用的地址列表。

<van-address-list
  v-model="chosenAddressId"
  :list="list"
  :disabled-list="disabledList"
  default-tag-text="默认"
  @add="onAdd"
  @edit="onEdit"
/>

const list = [
  {
    id: '1',
    name: '张三',
    tel: '13000000000',
    address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
    isDefault: true,
  },
  {
    id: '2',
    name: '李四',
    tel: '1310000000',
    address: '浙江省杭州市拱墅区莫干山路 50 号',
  },
];

地址编辑

创建或编辑地址时使用。

<van-address-edit
  :area-list="areaList"
  show-set-default
  show-search-result
  show-area
/>

API

AddressList Props

参数	说明	类型	默认值
v-model	当前选中地址的 id	string	-
list	地址列表	AddressListAddress[]	[]
disabled-list	不可配送地址列表	AddressListAddress[]	[]
disabled-text	不可配送提示文案	string	-
switchable	是否允许切换地址	boolean	true
add-button-text	底部按钮文字	string	新增地址
default-tag-text	默认地址标签文字	string	-
right-icon	右侧图标名称或图片链接	string	edit

AddressEdit Props

参数	说明	类型	默认值
area-list	地区列表	object	-
area-columns-placeholder	地区选择列占位提示文字	string[]	[]
address-info	地址信息初始值	AddressEditInfo	{}
show-area	是否显示地区	boolean	true
show-detail	是否显示详细地址	boolean	true
show-delete	是否显示删除按钮	boolean	false
show-set-default	是否显示默认地址栏	boolean	false
show-search-result	是否显示搜索结果	boolean	false
save-button-text	保存按钮文字	string	保存
delete-button-text	删除按钮文字	string	删除
detail-rows	详细地址输入框行数	number | string	1
tel-validator	手机号格式校验函数	(tel: string) => boolean	-