AddressEdit地址编辑

Bunury

已于 2024-03-13 20:08:35 修改

阅读量553

点赞数 6

分类专栏： Vant组件库文章标签：运维

于 2024-03-13 20:07:49 首次发布

本文链接：https://blog.csdn.net/weixin_49352307/article/details/136689684

版权

Vant组件库专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了Vant库中的地址编辑组件，包括其属性参数（如地区列表、邮政编码、删除按钮等），以及如何导入areaList数据和处理方法（如保存、删除和地址详情更改）。

摘要由CSDN通过智能技术生成

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

标签属性：

参数	说明	类型	默认值
area-list	地区列表	object	-
area-placeholder `v2.6.1`	地区输入框占位提示文字	string	`选择省 / 市 / 区`
search-result	详细地址搜索结果	SearchResult[]	`[]`
show-postal	是否显示邮政编码	boolean	`false`
show-delete	是否显示删除按钮	boolean	`false`
show-set-default	是否显示默认地址栏	boolean	`false`
show-search-result	是否显示搜索结果	boolean	`false`
disable-area `v2.5.0`	是否禁用地区选择	boolean	`false`
save-button-text	保存按钮文字	string	`保存`
delete-button-text	删除按钮文字	string	`删除`
is-saving	是否显示保存按钮加载动画	boolean	`false`
is-deleting	是否显示删除按钮加载动画	boolean	`false`

导入areaList数据

yarn add @vant/area-data

//先下载 yarn add @vant/area-data
import { areaList } from '@vant/area-data'

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

import { Toast } from 'vant';

export default {
  data() {
    return {
      areaList,//地址信息
      searchResult: [],//默认详细地址信息
    };
  },
  methods: {
      //点击保存按钮时触发,返回表单内容
    onSave() {
      Toast('save');
    },
      //确认删除地址时触发,返回表单内容
    onDelete() {
      Toast('delete');
    }， 
      //输入详情地址的时候，提示默认地址
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
};