@tanzhenxing/zx-address-edit v1.0.4

zx-address-edit 地址编辑

地址编辑组件，用于新建、更新、删除地址信息。

引入

import ZxAddressEdit from '@/components/zx-address-edit/zx-address-edit.vue';

代码演示

基础用法

<template>
  <view>
    <zx-address-edit
      :area-list="areaList" 
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const areaList = ref({
  province_list: {
    110000: '北京市',
    120000: '天津市'
  },
  city_list: {
    110100: '北京市',
    120100: '天津市'
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    120101: '和平区',
    120102: '河东区'
  }
});
const searchResult = ref([]);

const onSave = (data) => {
  console.log('save', data);
  uni.showToast({ title: '保存' });
};

const onDelete = (data) => {
  console.log('delete', data);
  uni.showToast({ title: '删除' });
};

const onChangeDetail = (val) => {
  if (val) {
    searchResult.value = [
      {
        name: '黄龙万科中心',
        address: '杭州市西湖区',
      },
    ];
  } else {
    searchResult.value = [];
  }
};
</script>

API

Props

Events

Slots

Methods

通过 ref 可以获取到 AddressEdit 实例并调用实例方法。

类型定义

AddressEditInfo

AddressEditSearchItem

省市县列表数据格式

请参考 zx-area 组件或 uni-data-picker 的数据格式。