useConfirmDialog

分类

实用工具

导出大小

416 B

上次更改

3 个月前

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

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

演示

源代码演练场 (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
">
    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>

类型声明

显示类型声明

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
>