import{o as s,a as d,y as a}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},n=a(`

AddressEdit \u5730\u5740\u7F16\u8F91

\u4ECB\u7ECD

\u5730\u5740\u7F16\u8F91\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u65B0\u5EFA\u3001\u66F4\u65B0\u3001\u5220\u9664\u5730\u5740\u4FE1\u606F\u3002

\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

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

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

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-address-edit
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9', '\u8BF7\u9009\u62E9']"
  @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: '\u9EC4\u9F99\u4E07\u79D1\u4E2D\u5FC3',
            address: '\u676D\u5DDE\u5E02\u897F\u6E56\u533A',
          },
        ];
      } else {
        searchResult.value = [];
      }
    };

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

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
area-list\u5730\u533A\u5217\u8868object-
area-columns-placeholder\u5730\u533A\u9009\u62E9\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57string[][]
area-placeholder\u5730\u533A\u8F93\u5165\u6846\u5360\u4F4D\u63D0\u793A\u6587\u5B57string\u9009\u62E9\u7701 / \u5E02 / \u533A
address-info\u5730\u5740\u4FE1\u606F\u521D\u59CB\u503CAddressEditInfo{}
search-result\u8BE6\u7EC6\u5730\u5740\u641C\u7D22\u7ED3\u679CAddressEditSearchItem[][]
show-postal\u662F\u5426\u663E\u793A\u90AE\u653F\u7F16\u7801booleanfalse
show-delete\u662F\u5426\u663E\u793A\u5220\u9664\u6309\u94AEbooleanfalse
show-set-default\u662F\u5426\u663E\u793A\u9ED8\u8BA4\u5730\u5740\u680Fbooleanfalse
show-search-result\u662F\u5426\u663E\u793A\u641C\u7D22\u7ED3\u679Cbooleanfalse
show-area\u662F\u5426\u663E\u793A\u5730\u533Abooleantrue
show-detail\u662F\u5426\u663E\u793A\u8BE6\u7EC6\u5730\u5740booleantrue
disable-area\u662F\u5426\u7981\u7528\u5730\u533A\u9009\u62E9booleanfalse
save-button-text\u4FDD\u5B58\u6309\u94AE\u6587\u5B57string\u4FDD\u5B58
delete-button-text\u5220\u9664\u6309\u94AE\u6587\u5B57string\u5220\u9664
detail-rows\u8BE6\u7EC6\u5730\u5740\u8F93\u5165\u6846\u884C\u6570number | string1
detail-maxlength\u8BE6\u7EC6\u5730\u5740\u6700\u5927\u957F\u5EA6number | string200
is-saving\u662F\u5426\u663E\u793A\u4FDD\u5B58\u6309\u94AE\u52A0\u8F7D\u52A8\u753Bbooleanfalse
is-deleting\u662F\u5426\u663E\u793A\u5220\u9664\u6309\u94AE\u52A0\u8F7D\u52A8\u753Bbooleanfalse
tel-validator\u624B\u673A\u53F7\u683C\u5F0F\u6821\u9A8C\u51FD\u6570string => boolean-
tel-maxlength\u624B\u673A\u53F7\u6700\u5927\u957F\u5EA6number | string-
postal-validator\u90AE\u653F\u7F16\u7801\u683C\u5F0F\u6821\u9A8C\u51FD\u6570string => boolean-
validator\u81EA\u5B9A\u4E49\u6821\u9A8C\u51FD\u6570(key, val) => string-

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
save\u70B9\u51FB\u4FDD\u5B58\u6309\u94AE\u65F6\u89E6\u53D1content\uFF1A\u8868\u5355\u5185\u5BB9
focus\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1key: \u805A\u7126\u7684\u8F93\u5165\u6846\u5BF9\u5E94\u7684 key
delete\u786E\u8BA4\u5220\u9664\u5730\u5740\u65F6\u89E6\u53D1content\uFF1A\u8868\u5355\u5185\u5BB9
select-search\u9009\u4E2D\u641C\u7D22\u7ED3\u679C\u65F6\u89E6\u53D1value: \u641C\u7D22\u7ED3\u679C
click-area\u70B9\u51FB\u6536\u4EF6\u5730\u533A\u65F6\u89E6\u53D1-
change-area\u4FEE\u6539\u6536\u4EF6\u5730\u533A\u65F6\u89E6\u53D1values: \u5730\u533A\u4FE1\u606F
change-detail\u4FEE\u6539\u8BE6\u7EC6\u5730\u5740\u65F6\u89E6\u53D1value: \u8BE6\u7EC6\u5730\u5740\u5185\u5BB9
change-default\u5207\u6362\u662F\u5426\u4F7F\u7528\u9ED8\u8BA4\u5730\u5740\u65F6\u89E6\u53D1value: \u662F\u5426\u9009\u4E2D

Slots

\u540D\u79F0\u8BF4\u660E
default\u5728\u90AE\u653F\u7F16\u7801\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9

\u65B9\u6CD5

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 AddressEdit \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002

\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
setAddressDetail\u8BBE\u7F6E\u8BE6\u7EC6\u5730\u5740addressDetail: string-

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

import type {
  AddressEditInfo,
  AddressEditProps,
  AddressEditInstance,
  AddressEditSearchItem,
} from 'vant';

AddressEditInstance \u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A

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

const addressEditRef = ref<AddressEditInstance>();

addressEditRef.value?.setAddressDetail('');

AddressEditInfo \u6570\u636E\u683C\u5F0F

\u6CE8\u610F\uFF1AAddressEditInfo \u4EC5\u4F5C\u4E3A\u521D\u59CB\u503C\u4F20\u5165\uFF0C\u8868\u5355\u6700\u7EC8\u5185\u5BB9\u53EF\u4EE5\u5728 save \u4E8B\u4EF6\u4E2D\u83B7\u53D6\u3002

key\u8BF4\u660E\u7C7B\u578B
name\u59D3\u540Dstring
tel\u624B\u673A\u53F7string
province\u7701\u4EFDstring
city\u57CE\u5E02string
county\u533A\u53BFstring
addressDetail\u8BE6\u7EC6\u5730\u5740string
areaCode\u5730\u533A\u7F16\u7801\uFF0C\u901A\u8FC7 \u7701\u5E02\u533A\u9009\u62E9 \u83B7\u53D6\uFF08\u5FC5\u586B\uFF09string
postalCode\u90AE\u653F\u7F16\u7801string
isDefault\u662F\u5426\u4E3A\u9ED8\u8BA4\u5730\u5740boolean

AddressEditSearchItem \u6570\u636E\u683C\u5F0F

key\u8BF4\u660E\u7C7B\u578B
name\u5730\u540Dstring
address\u8BE6\u7EC6\u5730\u5740string

\u7701\u5E02\u53BF\u5217\u8868\u6570\u636E\u683C\u5F0F

\u8BF7\u53C2\u8003 Area \u7701\u5E02\u533A\u9009\u62E9 \u7EC4\u4EF6\u3002

\u4E3B\u9898\u5B9A\u5236

\u6837\u5F0F\u53D8\u91CF

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-address-edit-paddingvar(--van-padding-sm)-
--van-address-edit-buttons-paddingvar(--van-padding-xl) var(--van-padding-base)-
--van-address-edit-button-margin-bottomvar(--van-padding-sm)-
--van-address-edit-button-font-sizevar(--van-font-size-lg)-
`,16),r=[n],i={__name:"README.zh-CN",setup(l,{expose:t}){return t({frontmatter:{}}),(c,p)=>(s(),d("div",e,r))}};export{i as default};