Skip to content

useConfirmDialog

Category
Export Size
418 B
Last Changed
last year

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

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

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>

Source

SourceDemoDocs

贡献者

Anthony Fu
Roman Harmyder
丶远方
糠帅傅
Waleed Khaled
Ryan Wu

变更日志

No recent changes

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow.
Get Early Access