useConfirmDialog

类别

Utilities

导出体积

416 B

上次更改

2 months ago

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

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

示例

源码 playground (beta)

函数和钩子

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
">
    显示模态框
  </button
>

  <teleport
 to
="body">
    <div
 v-if="isRevealed
" class
="modal-bg">
      <div
 class
="modal">
        <h2
>确认？</h2
>
        <button
 @click
="confirm
">
          是
        </button
>
        <button
 @click
="cancel
">
          取消
        </button
>
      </div
>
    </div
>
  </teleport>
</template>

Promise

如果你更喜欢使用 promises：

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
">
    显示模态框
  </button
>

  <teleport
 to
="body">
    <div
 v-if="isRevealed
" class
="modal-layout">
      <div
 class
="modal">
        <h2
>确认？</h2
>
        <button
 @click
="confirm
(true)">
          是
        </button
>
        <button
 @click
="confirm
(false)">
          否
        </button
>
      </div
>
    </div
>
  </teleport>
</template>

类型声明

显示类型声明

export type UseConfirmDialogRevealResult
<C
, D
> =
  | {
      data
?: C

      isCanceled
: false
    }
  | {
      data
?: D

      isCanceled
: true
    }
export interface UseConfirmDialogReturn
<RevealData
, ConfirmData
, CancelData
> {
  /**
   * 显示状态的计算属性
   */
  isRevealed
: ComputedRef
<boolean>
  /**
   * 打开对话框。
   * 创建一个 Promise 并返回它。触发 `onReveal` 钩子。
   */
  reveal
: (
    data
?: RevealData
,
  ) => Promise
<UseConfirmDialogRevealResult
<ConfirmData
, CancelData
>>
  /**
   * 确认并关闭对话框。触发 `onConfirm` 钩子中的回调。
   * 用 `data` 解决来自 `reveal()` 的 promise，并使用 `false` 值设置 `isCanceled` ref。
   * 可以接受任何数据并将其传递给 `onConfirm` 钩子。
   */
  confirm
: (data
?: ConfirmData
) => void
  /**
   * 取消并关闭对话框。触发 `onCancel` 钩子中的回调。
   * 用 `data` 解决来自 `reveal()` 的 promise，并使用 `true` 值设置 `isCanceled` ref。
   * 可以接受任何数据并将其传递给 `onCancel` 钩子。
   */
  cancel
: (data
?: CancelData
) => void
  /**
   * 在创建对话框之前触发的事件钩子。
   */
  onReveal
: EventHookOn
<RevealData
>
  /**
   * 在 `confirm()` 上调用的事件钩子。
   * 从 `confirm` 函数获取数据对象。
   */
  onConfirm
: EventHookOn
<ConfirmData
>
  /**
   * 在 `cancel()` 上调用的事件钩子。
   * 从 `cancel` 函数获取数据对象。
   */
  onCancel
: EventHookOn
<CancelData
>
}
/**
 * 用于创建确认对话框的钩子。对于模式窗口、弹出窗口和登录很有用。
 *
 * @see https://vueuse.org/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
>