Vant3 AddressEdit 地址編輯

介紹

收貨地址編輯組件，用于新建、更新、刪除收貨地址。

實(shí)例演示

引入

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

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

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

代碼演示

基礎(chǔ)用法

<van-address-edit
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['請(qǐng)選擇', '請(qǐng)選擇', '請(qǐng)選擇']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const searchResult = ref([]);

    const onSave = () => Toast('save');
    const onDelete = () => Toast('delete');
    const onChangeDetail = (val) => {
      if (val) {
        searchResult.value = [
          {
            name: '黃龍萬(wàn)科中心',
            address: '杭州市西湖區(qū)',
          },
        ];
      } else {
        searchResult.value = [];
      }
    };

    return {
      onSave,
      onDelete,
      areaList,
      searchResult,
      onChangeDetail,
    };
  },
};

API

Props

Events

Slots

方法

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

類型定義

通過(guò) AddressEditInstance 獲取 AddressEdit 實(shí)例的類型定義。

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

const addressEditRef = ref<AddressEditInstance>();

addressEditRef.value?.setAddressDetail('');

AddressInfo 數(shù)據(jù)格式

注意：AddressInfo 僅作為初始值傳入，表單最終內(nèi)容可以在 save 事件中獲取。

SearchResult 數(shù)據(jù)格式

省市縣列表數(shù)據(jù)格式

請(qǐng)參考 Area 組件。

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。