vant UI AddressEdit 如何使用

您好！对于使用 Vant UI 的 AddressEdit 组件，您可以按照以下步骤进行操作：

1. 首先，确保您已经安装并引入了 Vant UI 库。您可以通过 npm 或 yarn 安装，或者直接在 HTML 文件中引入相关的 CSS 和 JS 文件。

2. 在需要使用 AddressEdit 的页面或组件中，引入 AddressEdit 组件：

import { AddressEdit } from 'vant';

// 或者在Vue组件中注册全局组件
Vue.use(AddressEdit);

3. 在模板中使用 AddressEdit 组件，可以通过 v-model 指令绑定一个变量来获取用户输入的地址信息：

<template>
  <AddressEdit
    v-model="address"
    showPostal
    showSetDefault
    showSearchResult
    searchResult="搜索结果"
    @save="onSave"
    @delete="onDelete"
  />
</template>

<script>
export default {
  data() {
    return {
      address: {} // 存储用户输入的地址信息的变量
    };
  },
  methods: {
    onSave(address) {
      console.log('保存地址', address);
    },
    onDelete(address) {
      console.log('删除地址', address);
    }
  }
};
</script>

在上述示例中，我们使用 v-model 指令将用户输入的地址信息保存到 `address` 变量中，并通过 `@save` 和 `@delete` 监听用户保存和删除地址的事件。

4. 根据您的需求，可以自定义 AddressEdit 组件的属性和事件。＊＊＊