跳到主要内容

useConfirmDialog

分类
导出大小
416 B
上次更改
3 个月前

创建事件钩子以支持模态框和确认对话框链。

函数可以在模板上使用,而钩子是模态对话框或其他需要用户确认的操作的业务逻辑的便捷骨架。

演示

函数和钩子

  • reveal() - 触发 onReveal 钩子并将 revealed.value 设置为 true。返回一个由 confirm()cancel() 解决的 Promise。
  • confirm() - 将 isRevealed.value 设置为 false 并触发 onConfirm 钩子。
  • cancel() - 将 isRevealed.value 设置为 false 并触发 onCancel 钩子。

基本用法

使用钩子

vue
<script setup lang="ts">
import { 
useConfirmDialog
} from '@vueuse/core'
const {
isRevealed
,
reveal
,
confirm
,
cancel
,
onReveal
,
onConfirm
,
onCancel
}
=
useConfirmDialog
()
</script> <template> <
button
@
click
="
reveal
">
Reveal Modal </
button
>
<
teleport
to
="body">
<
div
v-if="
isRevealed
"
class
="modal-bg">
<
div
class
="modal">
<
h2
>Confirm?</
h2
>
<
button
@
click
="
confirm
">
Yes </
button
>
<
button
@
click
="
cancel
">
Cancel </
button
>
</
div
>
</
div
>
</teleport> </template>

Promise

如果您更喜欢使用 Promise

vue
<script setup lang="ts">
import { 
useConfirmDialog
} from '@vueuse/core'
const {
isRevealed
,
reveal
,
confirm
,
cancel
,
} =
useConfirmDialog
()
async function
openDialog
() {
const {
data
,
isCanceled
} = await
reveal
()
if (!
isCanceled
)
console
.
log
(
data
)
} </script> <template> <
button
@
click
="
openDialog
">
Show Modal </
button
>
<
teleport
to
="body">
<
div
v-if="
isRevealed
"
class
="modal-layout">
<
div
class
="modal">
<
h2
>Confirm?</
h2
>
<
button
@
click
="
confirm
(true)">
Yes </
button
>
<
button
@
click
="
confirm
(false)">
No </
button
>
</
div
>
</
div
>
</teleport> </template>

类型声明

显示类型声明
ts
export type 
UseConfirmDialogRevealResult
<
C
,
D
> =
| {
data
?:
C
isCanceled
: false
} | {
data
?:
D
isCanceled
: true
} export interface
UseConfirmDialogReturn
<
RevealData
,
ConfirmData
,
CancelData
> {
/** * Revealing state */
isRevealed
:
ComputedRef
<boolean>
/** * Opens the dialog. * Create promise and return it. Triggers `onReveal` hook. */
reveal
: (
data
?:
RevealData
,
) =>
Promise
<
UseConfirmDialogRevealResult
<
ConfirmData
,
CancelData
>>
/** * Confirms and closes the dialog. Triggers a callback inside `onConfirm` hook. * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `false` value. * Can accept any data and to pass it to `onConfirm` hook. */
confirm
: (
data
?:
ConfirmData
) => void
/** * Cancels and closes the dialog. Triggers a callback inside `onCancel` hook. * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `true` value. * Can accept any data and to pass it to `onCancel` hook. */
cancel
: (
data
?:
CancelData
) => void
/** * Event Hook to be triggered right before dialog creating. */
onReveal
:
EventHookOn
<
RevealData
>
/** * Event Hook to be called on `confirm()`. * Gets data object from `confirm` function. */
onConfirm
:
EventHookOn
<
ConfirmData
>
/** * Event Hook to be called on `cancel()`. * Gets data object from `cancel` function. */
onCancel
:
EventHookOn
<
CancelData
>
} /** * Hooks for creating confirm dialogs. Useful for modal windows, popups and logins. * * @see https://vueuse.org.cn/useConfirmDialog/ * @param revealed `boolean` `ref` that handles a modal window * * @__NO_SIDE_EFFECTS__ */ export declare function
useConfirmDialog
<
RevealData
= any,
ConfirmData
= any,
CancelData
= any,
>(
revealed
?:
ShallowRef
<boolean>,
):
UseConfirmDialogReturn
<
RevealData
,
ConfirmData
,
CancelData
>

来源

源代码演示文档

贡献者

Anthony Fu
Anthony Fu
Roman Harmyder
SerKo
Jialong Lu
IlyaL
OrbisK
糠帅傅
Waleed Khaled
丶远方
Ryan Wu

更新日志

v13.6.0
d32f8 - refactor: 为所有纯函数添加 @__NO_SIDE_EFFECTS__ 注释 (#4907)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)

根据 MIT 许可证发布。