From 10c36c05c37048daa8d8658e4f52b09e8bed2b03 Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 6 Aug 2021 19:11:38 +0800 Subject: [PATCH] types(AddressEdit): add AddressEditInstance type (#9197) --- src/address-edit/AddressEdit.tsx | 115 ++++++++++++------------- src/address-edit/AddressEditDetail.tsx | 8 +- src/address-edit/README.md | 13 +++ src/address-edit/README.zh-CN.md | 13 +++ src/address-edit/index.ts | 7 +- src/address-edit/types.ts | 32 +++++++ src/area/types.ts | 5 +- 7 files changed, 123 insertions(+), 70 deletions(-) create mode 100644 src/address-edit/types.ts diff --git a/src/address-edit/AddressEdit.tsx b/src/address-edit/AddressEdit.tsx index ede35a4fa..610605539 100644 --- a/src/address-edit/AddressEdit.tsx +++ b/src/address-edit/AddressEdit.tsx @@ -6,6 +6,7 @@ import { reactive, PropType, defineComponent, + ExtractPropTypes, } from 'vue'; // Utils @@ -30,24 +31,14 @@ import { Toast } from '../toast'; import { Button } from '../button'; import { Dialog } from '../dialog'; import { Switch } from '../switch'; -import AddressEditDetail, { AddressEditSearchItem } from './AddressEditDetail'; +import AddressEditDetail from './AddressEditDetail'; + +// Types +import type { AddressEditInfo, AddressEditSearchItem } from './types'; const [name, bem, t] = createNamespace('address-edit'); -export type AddressEditInfo = { - tel: string; - name: string; - city: string; - county: string; - country: string; - province: string; - areaCode: string; - isDefault?: boolean; - postalCode?: string; - addressDetail: string; -}; - -const defaultData: AddressEditInfo = { +const DEFAULT_DATA: AddressEditInfo = { name: '', tel: '', city: '', @@ -64,53 +55,57 @@ function isPostal(value: string) { return /^\d{6}$/.test(value); } +const props = { + areaList: Object as PropType, + isSaving: Boolean, + isDeleting: Boolean, + validator: Function as PropType< + (key: string, value: string) => string | undefined + >, + showArea: truthProp, + showDetail: truthProp, + showDelete: Boolean, + showPostal: Boolean, + disableArea: Boolean, + searchResult: Array as PropType, + telMaxlength: [Number, String], + showSetDefault: Boolean, + saveButtonText: String, + areaPlaceholder: String, + deleteButtonText: String, + showSearchResult: Boolean, + detailRows: { + type: [Number, String], + default: 1, + }, + detailMaxlength: { + type: [Number, String], + default: 200, + }, + addressInfo: { + type: Object as PropType>, + default: () => extend({}, DEFAULT_DATA), + }, + telValidator: { + type: Function as PropType<(val: string) => boolean>, + default: isMobile, + }, + postalValidator: { + type: Function as PropType<(val: string) => boolean>, + default: isPostal, + }, + areaColumnsPlaceholder: { + type: Array as PropType, + default: () => [], + }, +}; + +export type AddressEditProps = ExtractPropTypes; + export default defineComponent({ name, - props: { - areaList: Object as PropType, - isSaving: Boolean, - isDeleting: Boolean, - validator: Function as PropType< - (key: string, value: string) => string | undefined - >, - showArea: truthProp, - showDetail: truthProp, - showDelete: Boolean, - showPostal: Boolean, - disableArea: Boolean, - searchResult: Array as PropType, - telMaxlength: [Number, String], - showSetDefault: Boolean, - saveButtonText: String, - areaPlaceholder: String, - deleteButtonText: String, - showSearchResult: Boolean, - detailRows: { - type: [Number, String], - default: 1, - }, - detailMaxlength: { - type: [Number, String], - default: 200, - }, - addressInfo: { - type: Object as PropType>, - default: () => extend({}, defaultData), - }, - telValidator: { - type: Function as PropType<(val: string) => boolean>, - default: isMobile, - }, - postalValidator: { - type: Function as PropType<(val: string) => boolean>, - default: isPostal, - }, - areaColumnsPlaceholder: { - type: Array as PropType, - default: () => [], - }, - }, + props, emits: [ 'save', @@ -317,7 +312,7 @@ export default defineComponent({ watch( () => props.addressInfo, (value) => { - state.data = extend({}, defaultData, value); + state.data = extend({}, DEFAULT_DATA, value); setAreaCode(value.areaCode); }, { diff --git a/src/address-edit/AddressEditDetail.tsx b/src/address-edit/AddressEditDetail.tsx index 113794afc..b6d1ed0f8 100644 --- a/src/address-edit/AddressEditDetail.tsx +++ b/src/address-edit/AddressEditDetail.tsx @@ -7,14 +7,12 @@ import { isAndroid, ComponentInstance, createNamespace } from '../utils'; import { Cell } from '../cell'; import { Field } from '../field'; +// Types +import type { AddressEditSearchItem } from './types'; + const [name, bem, t] = createNamespace('address-edit-detail'); const android = isAndroid(); -export type AddressEditSearchItem = { - name: string; - address: string; -}; - export default defineComponent({ name, diff --git a/src/address-edit/README.md b/src/address-edit/README.md index d8e17360d..86c0f7a7f 100644 --- a/src/address-edit/README.md +++ b/src/address-edit/README.md @@ -126,6 +126,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Addres | --- | --- | --- | --- | | setAddressDetail | Set address detail | _addressDetail: string_ | - | +### Types + +Get the type definition of the AddressEdit instance through `AddressEditInstance`. + +```ts +import { ref } from 'vue'; +import type { AddressEditInstance } from 'vant'; + +const addressEditRef = ref(); + +addressEditRef.value?.setAddressDetail(''); +``` + ### AddressInfo Data Structure | key | Description | Type | diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md index e421947ea..3062297ec 100644 --- a/src/address-edit/README.zh-CN.md +++ b/src/address-edit/README.zh-CN.md @@ -126,6 +126,19 @@ export default { | ---------------- | ------------ | ----------------------- | ------ | | setAddressDetail | 设置详细地址 | _addressDetail: string_ | - | +### 类型定义 + +通过 `AddressEditInstance` 获取 AddressEdit 实例的类型定义。 + +```ts +import { ref } from 'vue'; +import type { AddressEditInstance } from 'vant'; + +const addressEditRef = ref(); + +addressEditRef.value?.setAddressDetail(''); +``` + ### AddressInfo 数据格式 注意：`AddressInfo` 仅作为初始值传入，表单最终内容可以在 save 事件中获取。 diff --git a/src/address-edit/index.ts b/src/address-edit/index.ts index 55f962db2..eb8df5185 100644 --- a/src/address-edit/index.ts +++ b/src/address-edit/index.ts @@ -5,5 +5,8 @@ const AddressEdit = withInstall(_AddressEdit); export default AddressEdit; export { AddressEdit }; -export type { AddressEditInfo } from './AddressEdit'; -export type { AddressEditSearchItem } from './AddressEditDetail'; +export type { + AddressEditInfo, + AddressEditInstance, + AddressEditSearchItem, +} from './types'; diff --git a/src/address-edit/types.ts b/src/address-edit/types.ts new file mode 100644 index 000000000..bd0a51b69 --- /dev/null +++ b/src/address-edit/types.ts @@ -0,0 +1,32 @@ +import type { ComponentPublicInstance } from 'vue'; +import type { AreaColumnOption } from '../area'; +import type { AddressEditProps } from './AddressEdit'; + +export type AddressEditSearchItem = { + name: string; + address: string; +}; + +export type AddressEditInfo = { + tel: string; + name: string; + city: string; + county: string; + country: string; + province: string; + areaCode: string; + isDefault?: boolean; + postalCode?: string; + addressDetail: string; +}; + +export type AddressEditExpose = { + getArea: () => AreaColumnOption[]; + setAreaCode: (code?: string | undefined) => void; + setAddressDetail: (value: string) => void; +}; + +export type AddressEditInstance = ComponentPublicInstance< + AddressEditProps, + AddressEditExpose +>; diff --git a/src/area/types.ts b/src/area/types.ts index 02eeff5b5..d182ba9c9 100644 --- a/src/area/types.ts +++ b/src/area/types.ts @@ -1,7 +1,6 @@ /* eslint-disable camelcase */ - -import { ComponentPublicInstance } from 'vue'; -import { AreaProps } from './Area'; +import type { ComponentPublicInstance } from 'vue'; +import type { AreaProps } from './Area'; export type AreaList = { city_list: Record;