import{o as s,a as d,y as a}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},n=a(`
\u5730\u5740\u7F16\u8F91\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u65B0\u5EFA\u3001\u66F4\u65B0\u3001\u5220\u9664\u5730\u5740\u4FE1\u606F\u3002
\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);
<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,
};
},
};
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
---|---|---|---|
area-list | \u5730\u533A\u5217\u8868 | object | - |
area-columns-placeholder | \u5730\u533A\u9009\u62E9\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | string[] | [] |
area-placeholder | \u5730\u533A\u8F93\u5165\u6846\u5360\u4F4D\u63D0\u793A\u6587\u5B57 | string | \u9009\u62E9\u7701 / \u5E02 / \u533A |
address-info | \u5730\u5740\u4FE1\u606F\u521D\u59CB\u503C | AddressEditInfo | {} |
search-result | \u8BE6\u7EC6\u5730\u5740\u641C\u7D22\u7ED3\u679C | AddressEditSearchItem[] | [] |
show-postal | \u662F\u5426\u663E\u793A\u90AE\u653F\u7F16\u7801 | boolean | false |
show-delete | \u662F\u5426\u663E\u793A\u5220\u9664\u6309\u94AE | boolean | false |
show-set-default | \u662F\u5426\u663E\u793A\u9ED8\u8BA4\u5730\u5740\u680F | boolean | false |
show-search-result | \u662F\u5426\u663E\u793A\u641C\u7D22\u7ED3\u679C | boolean | false |
show-area | \u662F\u5426\u663E\u793A\u5730\u533A | boolean | true |
show-detail | \u662F\u5426\u663E\u793A\u8BE6\u7EC6\u5730\u5740 | boolean | true |
disable-area | \u662F\u5426\u7981\u7528\u5730\u533A\u9009\u62E9 | boolean | false |
save-button-text | \u4FDD\u5B58\u6309\u94AE\u6587\u5B57 | string | \u4FDD\u5B58 |
delete-button-text | \u5220\u9664\u6309\u94AE\u6587\u5B57 | string | \u5220\u9664 |
detail-rows | \u8BE6\u7EC6\u5730\u5740\u8F93\u5165\u6846\u884C\u6570 | number | string | 1 |
detail-maxlength | \u8BE6\u7EC6\u5730\u5740\u6700\u5927\u957F\u5EA6 | number | string | 200 |
is-saving | \u662F\u5426\u663E\u793A\u4FDD\u5B58\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | boolean | false |
is-deleting | \u662F\u5426\u663E\u793A\u5220\u9664\u6309\u94AE\u52A0\u8F7D\u52A8\u753B | boolean | false |
tel-validator | \u624B\u673A\u53F7\u683C\u5F0F\u6821\u9A8C\u51FD\u6570 | string => boolean | - |
tel-maxlength | \u624B\u673A\u53F7\u6700\u5927\u957F\u5EA6 | number | string | - |
postal-validator | \u90AE\u653F\u7F16\u7801\u683C\u5F0F\u6821\u9A8C\u51FD\u6570 | string => boolean | - |
validator | \u81EA\u5B9A\u4E49\u6821\u9A8C\u51FD\u6570 | (key, val) => string | - |
\u4E8B\u4EF6\u540D | \u8BF4\u660E | \u56DE\u8C03\u53C2\u6570 |
---|---|---|
save | \u70B9\u51FB\u4FDD\u5B58\u6309\u94AE\u65F6\u89E6\u53D1 | content\uFF1A\u8868\u5355\u5185\u5BB9 |
focus | \u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1 | key: \u805A\u7126\u7684\u8F93\u5165\u6846\u5BF9\u5E94\u7684 key |
delete | \u786E\u8BA4\u5220\u9664\u5730\u5740\u65F6\u89E6\u53D1 | content\uFF1A\u8868\u5355\u5185\u5BB9 |
select-search | \u9009\u4E2D\u641C\u7D22\u7ED3\u679C\u65F6\u89E6\u53D1 | value: \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\u53D1 | values: \u5730\u533A\u4FE1\u606F |
change-detail | \u4FEE\u6539\u8BE6\u7EC6\u5730\u5740\u65F6\u89E6\u53D1 | value: \u8BE6\u7EC6\u5730\u5740\u5185\u5BB9 |
change-default | \u5207\u6362\u662F\u5426\u4F7F\u7528\u9ED8\u8BA4\u5730\u5740\u65F6\u89E6\u53D1 | value: \u662F\u5426\u9009\u4E2D |
\u540D\u79F0 | \u8BF4\u660E |
---|---|
default | \u5728\u90AE\u653F\u7F16\u7801\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9 |
\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\u5740 | addressDetail: string | - |
\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('');
\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\u540D | string |
tel | \u624B\u673A\u53F7 | string |
province | \u7701\u4EFD | string |
city | \u57CE\u5E02 | string |
county | \u533A\u53BF | string |
addressDetail | \u8BE6\u7EC6\u5730\u5740 | string |
areaCode | \u5730\u533A\u7F16\u7801\uFF0C\u901A\u8FC7 \u7701\u5E02\u533A\u9009\u62E9 \u83B7\u53D6\uFF08\u5FC5\u586B\uFF09 | string |
postalCode | \u90AE\u653F\u7F16\u7801 | string |
isDefault | \u662F\u5426\u4E3A\u9ED8\u8BA4\u5730\u5740 | boolean |
key | \u8BF4\u660E | \u7C7B\u578B |
---|---|---|
name | \u5730\u540D | string |
address | \u8BE6\u7EC6\u5730\u5740 | string |
\u8BF7\u53C2\u8003 Area \u7701\u5E02\u533A\u9009\u62E9 \u7EC4\u4EF6\u3002
\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-padding | var(--van-padding-sm) | - |
--van-address-edit-buttons-padding | var(--van-padding-xl) var(--van-padding-base) | - |
--van-address-edit-button-margin-bottom | var(--van-padding-sm) | - |
--van-address-edit-button-font-size | var(--van-font-size-lg) | - |