useConfirmDialog

Demo

函数和钩子

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

基本用法

使用钩子

vue

<script setup>
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>
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>

类型声明

显示类型声明

typescript

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
 */
export declare function useConfirmDialog<
  RevealData = any,
  ConfirmData = any,
  CancelData = any,
>(
  revealed?: Ref<boolean>,
): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>