From 9418fe371d2867ed123f46d37ae511aab02757b1 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 10 Sep 2022 12:28:43 +0800 Subject: [PATCH] docs: improve use component guide (#11020) --- packages/vant/src/dialog/README.md | 6 ++++-- packages/vant/src/dialog/README.zh-CN.md | 8 +++++--- packages/vant/src/dialog/demo/index.vue | 8 ++++---- .../test/__snapshots__/demo.spec.ts.snap | 2 +- packages/vant/src/image-preview/README.md | 12 +++++++++-- .../vant/src/image-preview/README.zh-CN.md | 16 +++++++++++---- .../vant/src/image-preview/demo/index.vue | 8 ++++---- packages/vant/src/notify/README.md | 20 ++++++++++--------- packages/vant/src/notify/README.zh-CN.md | 14 ++++++++----- packages/vant/src/notify/demo/index.vue | 8 ++++---- .../test/__snapshots__/demo.spec.ts.snap | 2 +- packages/vant/src/toast/README.md | 2 +- packages/vant/src/toast/README.zh-CN.md | 6 ++++-- 13 files changed, 70 insertions(+), 42 deletions(-) diff --git a/packages/vant/src/dialog/README.md b/packages/vant/src/dialog/README.md index a7f700dfa..baac13ad9 100644 --- a/packages/vant/src/dialog/README.md +++ b/packages/vant/src/dialog/README.md @@ -104,9 +104,9 @@ showConfirmDialog({ }); ``` -### Advanced Usage +### Use Dialog Component -If you need to render vue components within a dialog, you can use dialog component. +If you need to render Vue components within a Dialog, you can use the Dialog component. ```html @@ -129,6 +129,8 @@ export default { ### Methods +Vant exports following Dialog utility functions: + | Name | Description | Attribute | Return value | | --- | --- | --- | --- | | showDialog | Show dialog | _options: DialogOptions_ | `Promise` | diff --git a/packages/vant/src/dialog/README.zh-CN.md b/packages/vant/src/dialog/README.zh-CN.md index 5060ec090..ca04204f3 100644 --- a/packages/vant/src/dialog/README.zh-CN.md +++ b/packages/vant/src/dialog/README.zh-CN.md @@ -121,9 +121,9 @@ showConfirmDialog({ }); ``` -### 组件调用 +### 使用 Dialog 组件 -如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。 +如果需要在 Dialog 内嵌入组件或其他自定义内容，可以直接使用 Dialog 组件，并使用默认插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。 ```html @@ -146,6 +146,8 @@ export default { ### 方法 +Vant 中导出了以下 Dialog 相关的辅助函数： + | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | | showDialog | 展示弹窗 | _options: DialogOptions_ | `Promise` | @@ -156,7 +158,7 @@ export default { ### DialogOptions -通过函数调用 `Dialog` 时，支持传入以下选项： +调用 `showDialog` 等方法时，支持传入以下选项： | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | diff --git a/packages/vant/src/dialog/demo/index.vue b/packages/vant/src/dialog/demo/index.vue index 7e5c80520..0a7447bf5 100644 --- a/packages/vant/src/dialog/demo/index.vue +++ b/packages/vant/src/dialog/demo/index.vue @@ -17,7 +17,7 @@ const t = useTranslate({ '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。', beforeClose: '异步关闭', roundButton: '圆角按钮样式', - componentCall: '组件调用', + useComponent: '使用 Dialog 组件', }, 'en-US': { title: 'Title', @@ -29,7 +29,7 @@ const t = useTranslate({ content3: 'Content', beforeClose: 'Before Close', roundButton: 'Round Button Style', - componentCall: 'Component Call', + useComponent: 'Use Dialog Component', }, }); @@ -101,8 +101,8 @@ const onClickBeforeClose = () => { - - + +
- Component Call + Use Dialog Component
diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md index 0ac696e0a..110c5e97d 100644 --- a/packages/vant/src/image-preview/README.md +++ b/packages/vant/src/image-preview/README.md @@ -105,7 +105,7 @@ setTimeout(() => { }, 2000); ``` -### Component Call +### Use ImagePreview Component ```html @@ -140,7 +140,15 @@ export default { ## API -### Options +### Methods + +Vant exports following ImagePreview utility functions: + +| Methods | Description | Attribute | Return value | +| ---------------- | ------------------ | --------- | -------------------- | --------------------- | +| showImagePreview | Show image preview | `string[] | ImagePreviewOptions` | imagePreview Instance | + +### ImagePreviewOptions | Attribute | Description | Type | Default | | --- | --- | --- | --- | diff --git a/packages/vant/src/image-preview/README.zh-CN.md b/packages/vant/src/image-preview/README.zh-CN.md index c6bf81598..4bd86280c 100644 --- a/packages/vant/src/image-preview/README.zh-CN.md +++ b/packages/vant/src/image-preview/README.zh-CN.md @@ -114,9 +114,9 @@ setTimeout(() => { }, 2000); ``` -### 组件调用 +### 使用 ImagePreview 组件 -如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `app.use` 注册组件。 +如果需要在 ImagePreview 内嵌入组件或其他自定义内容，可以直接使用 ImagePreview 组件，并使用 `index` 插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。 ```html @@ -151,9 +151,17 @@ export default { ## API -### Options +### 方法 -通过函数调用 `showImagePreview` 时，支持传入以下选项： +Vant 中导出了以下 ImagePreview 相关的辅助函数： + +| 方法名 | 说明 | 参数 | 返回值 | +| ---------------- | ------------ | --------- | -------------------- | ----------------- | +| showImagePreview | 展示图片预览 | `string[] | ImagePreviewOptions` | imagePreview 实例 | + +### ImagePreviewOptions + +调用 `showImagePreview` 方法时，支持传入以下选项： | 参数名 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | diff --git a/packages/vant/src/image-preview/demo/index.vue b/packages/vant/src/image-preview/demo/index.vue index 1d05f20c3..e5780d686 100644 --- a/packages/vant/src/image-preview/demo/index.vue +++ b/packages/vant/src/image-preview/demo/index.vue @@ -18,7 +18,7 @@ const t = useTranslate({ closeEvent: '监听关闭事件', customConfig: '传入配置项', startPosition: '指定初始位置', - componentCall: '组件调用', + useComponent: '使用 ImagePreview 组件', index: (index: number) => `第${index + 1}页`, }, 'en-US': { @@ -29,7 +29,7 @@ const t = useTranslate({ closeEvent: 'Close Event', customConfig: 'Custom Config', startPosition: 'Set Start Position', - componentCall: 'Component Call', + useComponent: 'Use ImagePreview Component', index: (index: number) => `Page: ${index}`, }, }); @@ -106,8 +106,8 @@ const showFunctionCall = (options: Partial = {}) => { /> - - + + diff --git a/packages/vant/src/notify/README.md b/packages/vant/src/notify/README.md index 934b1fdb5..8233e8f1a 100644 --- a/packages/vant/src/notify/README.md +++ b/packages/vant/src/notify/README.md @@ -75,10 +75,10 @@ showNotify({ }); ``` -### Component Call +### Use Notify Component ```html - + Content @@ -111,14 +111,16 @@ export default { ### Methods -| Methods | Attribute | Return value | Description | -| --- | --- | --- | --- | -| showNotify | `options \| message` | notify instance | Show notify | -| closeNotify | - | `void` | Close notify | -| setNotifyDefaultOptions | `options` | `void` | Set default options of all notifies | -| resetNotifyDefaultOptions | - | `void` | Reset default options of all notifies | +Vant exports following Notify utility functions: -### Options +| Methods | Description | Attribute | Return value | +| --- | --- | --- | --- | +| showNotify | Show notify | `NotifyOptions \| string` | notify instance | +| closeNotify | Close notify | - | `void` | +| setNotifyDefaultOptions | Set default options of all notifies | `NotifyOptions` | `void` | +| resetNotifyDefaultOptions | Reset default options of all notifies | - | `void` | + +### NotifyOptions | Attribute | Description | Type | Default | | --- | --- | --- | --- | diff --git a/packages/vant/src/notify/README.zh-CN.md b/packages/vant/src/notify/README.zh-CN.md index 3e5ad89f7..84a9f7eff 100644 --- a/packages/vant/src/notify/README.zh-CN.md +++ b/packages/vant/src/notify/README.zh-CN.md @@ -86,9 +86,9 @@ showNotify({ }); ``` -### 组件调用 +### 使用 Notify 组件 -如果需要在 Notify 内嵌入组件或其他自定义内容，可以使用组件调用的方式。 +如果需要在 Notify 内嵌入组件或其他自定义内容，可以直接使用 Notify 组件，并使用默认插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。 ```html @@ -124,14 +124,18 @@ export default { ### 方法 +Vant 中导出了以下 Notify 相关的辅助函数： + | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | -| showNotify | 展示提示 | `options \| message` | notify 实例 | +| showNotify | 展示提示 | `NotifyOptions \| string` | notify 实例 | | closeNotify | 关闭提示 | - | `void` | -| setNotifyDefaultOptions | 修改默认配置，影响所有的 `showNotify` 调用 | `options` | `void` | +| setNotifyDefaultOptions | 修改默认配置，影响所有的 `showNotify` 调用 | `NotifyOptions` | `void` | | resetNotifyDefaultOptions | 重置默认配置，影响所有的 `showNotify` 调用 | - | `void` | -### Options +### NotifyOptions + +调用 `showNotify` 等方法时，支持传入以下选项： | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | diff --git a/packages/vant/src/notify/demo/index.vue b/packages/vant/src/notify/demo/index.vue index 95ef3ee43..4cfca0c5c 100644 --- a/packages/vant/src/notify/demo/index.vue +++ b/packages/vant/src/notify/demo/index.vue @@ -15,7 +15,7 @@ const t = useTranslate({ notifyType: '通知类型', customColor: '自定义颜色', customNotify: '自定义配置', - componentCall: '组件调用', + useComponent: '使用 Notify 组件', customDuration: '自定义时长', customPosition: '自定义位置', }, @@ -28,7 +28,7 @@ const t = useTranslate({ notifyType: 'Notify Type', customColor: 'Custom Color', customNotify: 'Custom Notify', - componentCall: 'Component Call', + useComponent: 'Use Notify Component', customDuration: 'Custom Duration', customPosition: 'Custom Position', }, @@ -103,8 +103,8 @@ const showComponentCall = () => { /> - - + + diff --git a/packages/vant/src/notify/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/notify/test/__snapshots__/demo.spec.ts.snap index 0ff23424a..c04cfa322 100644 --- a/packages/vant/src/notify/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/notify/test/__snapshots__/demo.spec.ts.snap @@ -110,7 +110,7 @@ exports[`should render demo and match snapshot 1`] = ` >
- Component Call + Use Notify Component
diff --git a/packages/vant/src/toast/README.md b/packages/vant/src/toast/README.md index dc7eba904..d65983e51 100644 --- a/packages/vant/src/toast/README.md +++ b/packages/vant/src/toast/README.md @@ -179,7 +179,7 @@ export default { ### Methods -Vant export following utility functions: +Vant exports following Toast utility functions: | Name | Description | Attribute | Return value | | --- | --- | --- | --- | diff --git a/packages/vant/src/toast/README.zh-CN.md b/packages/vant/src/toast/README.zh-CN.md index fc5e43a83..b793b3005 100644 --- a/packages/vant/src/toast/README.zh-CN.md +++ b/packages/vant/src/toast/README.zh-CN.md @@ -169,7 +169,7 @@ resetToastDefaultOptions('loading'); ### 使用 Toast 组件 -如果需要在 Toast 内嵌入组件或其他自定义内容，可以直接使用 Toast 组件，并使用 message 插槽进行定制。 +如果需要在 Toast 内嵌入组件或其他自定义内容，可以直接使用 Toast 组件，并使用 message 插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。 ```html @@ -194,7 +194,7 @@ export default { ### 方法 -Vant 中导出了以下 Toast 辅助函数： +Vant 中导出了以下 Toast 相关的辅助函数： | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | @@ -209,6 +209,8 @@ Vant 中导出了以下 Toast 辅助函数： ### ToastOptions 数据结构 +调用 `showToast` 等方法时，支持传入以下选项： + | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | type | 提示类型，可选值为 `loading` `success`
`fail` `html` | _ToastType_ | `text` |