blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-21 22:09:16 +08:00
Code Issues Projects Releases Wiki Activity

feat(Dialog): add JSDoc for utility functions (#12343)

Browse Source
This commit is contained in:
neverland 2023-10-06 10:12:52 +08:00 committed by GitHub
parent d56623ef77
commit f1d5376c9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/vant/src/dialog/README.md
View File

@ -32,7 +32,7 @@ showDialog({ message: 'Content' });
### Alert dialog ### Alert dialog
Used to prompt for some messages, only including one confirm button. Used to prompt for some messages, only including one confirm button by default.
```js ```js
showDialog({ showDialog({
@ -51,7 +51,7 @@ showDialog({
### Confirm dialog ### Confirm dialog
Used to confirm some messages, including a confirm button and a cancel button. Used to confirm some messages, including a confirm button and a cancel button by default.
```js ```js
showConfirmDialog({ showConfirmDialog({
@ -68,7 +68,7 @@ showConfirmDialog({
### Round Button Style ### Round Button Style
Use round button style. Setting the `theme` option to `round-button` will display the Dialog with a rounded button style.
```js ```js
showDialog({ showDialog({
@ -89,6 +89,8 @@ showDialog({
### Async Close ### Async Close
You can pass a callback function through the `beforeClose` option to perform specific operations before closing the Dialog.
```js ```js
const beforeClose = (action) => const beforeClose = (action) =>
new Promise((resolve) => { new Promise((resolve) => {
@ -106,7 +108,7 @@ showConfirmDialog({
### Use Dialog Component ### Use Dialog Component
If you need to render Vue components within a Dialog, you can use the Dialog component. If you need to embed components or other custom content within a Dialog, you can directly use the Dialog component and customize it using the default slot. Before using it, you need to register the component using `app.use` or other methods.
```html ```html
<van-dialog v-model:show="show" title="Title" show-cancel-button> <van-dialog v-model:show="show" title="Title" show-cancel-button>
@ -133,11 +135,11 @@ Vant exports following Dialog utility functions:
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| showDialog | Show dialog | _options: DialogOptions_ | `Promise<void>` | | showDialog | Display a message prompt dialog with a default confirm button | _options: DialogOptions_ | `Promise<void>` |
| showConfirmDialog | Show confirm dialog | _options: DialogOptions_ | `Promise<void>` | | showConfirmDialog | Display a message confirmation dialog with default confirm and cancel buttons | _options: DialogOptions_ | `Promise<void>` |
| closeDialog | Close dialog | - | `void` | | closeDialog | Close the currently displayed dialog | - | `void` |
| setDialogDefaultOptions | Set default options of all dialogs | _options: DialogOptions_ | `void` | | setDialogDefaultOptions | Modify the default configuration that affects all `showDialog` calls | _options: DialogOptions_ | `void` |
| resetDialogDefaultOptions | Reset default options of all dialogs | - | `void` | | resetDialogDefaultOptions | Reset the default configuration that affects all `showDialog` calls | - | `void` |
### DialogOptions ### DialogOptions

12
packages/vant/src/dialog/README.zh-CN.md
View File

@ -32,7 +32,7 @@ showDialog({ message: '提示' });
### 消息提示 ### 消息提示
用于提示一些消息，只包含一个确认按钮。 用于提示一些消息，默认只包含一个确认按钮。
```js ```js
import { showDialog } from 'vant'; import { showDialog } from 'vant';
@ -53,7 +53,7 @@ showDialog({
### 消息确认 ### 消息确认
用于确认消息，包含取消和确认按钮。 用于确认消息，默认包含确认和取消按钮。
```js ```js
import { showConfirmDialog } from 'vant'; import { showConfirmDialog } from 'vant';
@ -123,7 +123,7 @@ showConfirmDialog({
### 使用 Dialog 组件 ### 使用 Dialog 组件
如果需要在 Dialog 内嵌入组件或其他自定义内容，可以直接使用 Dialog 组件，并使用默认插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。 如果你需要在 Dialog 内嵌入组件或其他自定义内容，可以直接使用 Dialog 组件，并使用默认插槽进行定制。使用前需要通过 `app.use` 等方式注册组件。
```html ```html
<van-dialog v-model:show="show" title="标题" show-cancel-button> <van-dialog v-model:show="show" title="标题" show-cancel-button>
@ -150,9 +150,9 @@ Vant 中导出了以下 Dialog 相关的辅助函数：
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| showDialog | 展示弹窗 | _options: DialogOptions_ | `Promise<void>` | | showDialog | 展示消息提示弹窗，默认包含确认按钮 | _options: DialogOptions_ | `Promise<void>` |
| showConfirmDialog | 展示消息确认弹窗 | _options: DialogOptions_ | `Promise<void>` | | showConfirmDialog | 展示消息确认弹窗，默认包含确认和取消按钮 | _options: DialogOptions_ | `Promise<void>` |
| closeDialog | 关闭弹窗 | - | `void` | | closeDialog | 关闭当前展示的弹窗 | - | `void` |
| setDialogDefaultOptions | 修改默认配置，影响所有的 `showDialog` 调用 | _options: DialogOptions_ | `void` | | setDialogDefaultOptions | 修改默认配置，影响所有的 `showDialog` 调用 | _options: DialogOptions_ | `void` |
| resetDialogDefaultOptions | 重置默认配置，影响所有的 `showDialog` 调用 | - | `void` | | resetDialogDefaultOptions | 重置默认配置，影响所有的 `showDialog` 调用 | - | `void` |

15
packages/vant/src/dialog/function-call.tsx
View File

@ -46,6 +46,9 @@ function initInstance() {
({ instance } = mountComponent(Wrapper)); ({ instance } = mountComponent(Wrapper));
} }
/**
* Display a message prompt dialog with a default confirm button
*/
export function showDialog( export function showDialog(
options: DialogOptions, options: DialogOptions,
): Promise<DialogAction | undefined> { ): Promise<DialogAction | undefined> {
@ -69,17 +72,29 @@ export function showDialog(
}); });
} }
/**
* Modify the default configuration that affects all `showDialog` calls
*/
export const setDialogDefaultOptions = (options: DialogOptions) => { export const setDialogDefaultOptions = (options: DialogOptions) => {
extend(currentOptions, options); extend(currentOptions, options);
}; };
/**
* Reset the default configuration that affects all `showDialog` calls
*/
export const resetDialogDefaultOptions = () => { export const resetDialogDefaultOptions = () => {
currentOptions = extend({}, DEFAULT_OPTIONS); currentOptions = extend({}, DEFAULT_OPTIONS);
}; };
/**
* Display a message confirmation dialog with default confirm and cancel buttons
*/
export const showConfirmDialog = (options: DialogOptions) => export const showConfirmDialog = (options: DialogOptions) =>
showDialog(extend({ showCancelButton: true }, options)); showDialog(extend({ showCancelButton: true }, options));
/**
* Close the currently displayed dialog
*/
export const closeDialog = () => { export const closeDialog = () => {
if (instance) { if (instance) {
instance.toggle(false); instance.toggle(false);