弹窗 useDialog

更新: 2025/1/20 字数: 0 字 时长: 0 分钟

基础使用

useDialog 是一个用于创建 vant 弹窗组件的 Composition API 二次封装。

打开基础弹窗

openDialog 函数，传入相应参数，展示一个基础弹窗。

import useDialog from "@/hooks/useDialog";
const { openDialog } = useDialog();

点击查看示例代码

<van-button @click="openDialog('提示', '这是一段提示')"> 提示弹窗 </van-button>
<van-button @click="openDialog('', '这是一段提示')">
  提示弹窗（无标题）
</van-button>

打开确认弹窗

confirmDialog 函数，传入相应参数，展示一个用于确认消息的弹窗，默认包含确认和取消按钮。

import useDialog from "@/hooks/useDialog";
const { confirmDialog } = useDialog();

点击查看示例代码

<van-button @click="confirmDialog('标题', '这是一段确认信息')">
  确认弹窗
</van-button>

自定义api弹窗

TIP

addDialog 函数，传入相应参数，展示一个用于确认消息的弹窗，默认包含确认和取消按钮。也可以引入ReDialog组件

import { addDialog } from "@/components/Dialog";
function onModalClick() {
  addDialog({
    headerRenderer: () => h("p", null, "弹框头部-自定义"),
    contentRenderer: () => h("p", "弹框内容-弹窗api式调用"),
  });
}

点击查看示例代码

<van-button @click="onModalClick()"> 自定义api弹窗 </van-button>

API

返回值、方法

返回值、方法	说明	类型
openDialog	展示消息提示弹窗，默认包含确认按钮	(title: string, message?: DialogMessage, params?: DialogOptions) => Promise<unknown>
confirmDialog	展示消息确认弹窗，默认包含确认和取消按钮	(title: string, message?: DialogMessage, params?: DialogOptions) => Promise<unknown>
closeAllDialog	关闭消息弹窗	() => void

openDialog 详解

它接收三个参数，如下

参数名	说明	类型
title	标题	string
message	文本内容，支持通过 \n 换行	DialogMessage
params	弹窗的配置参数，见下表	DialogOptions

类型声明

import type { CSSProperties, TeleportProps } from "vue";
type DialogMessage = string | (() => JSX.Element);
type DialogTheme = "default" | "round-button";
type DialogMessageAlign = "left" | "center" | "right" | "justify";
type DialogOptions = {
  /** 标题内容 */
  title?: string;
  /** 弹窗宽度，默认单位px，默认值320px */
  width?: string | number;
  /** 内容对齐方式，可选值为 left right，默认center */
  messageAlign?: DialogMessageAlign;
  /** 样式风格，可选值为 round-button，默认default */
  theme?: DialogTheme;
  /** 自定义类名 */
  className?: string | Array<string> | object;
  /** 是否展示确认按钮，默认true */
  showConfirmButton?: boolean;
  /** 是否展示取消按钮，默认false */
  showCancelButton?: boolean;
  /** 确认按钮文案，默认 确认 */
  confirmButtonText?: string;
  /** 确认按钮颜色，默认#ee0a24 */
  confirmButtonColor?: string;
  /** 是否禁用确认按钮，默认false */
  confirmButtonDisabled?: boolean;
  /** 取消按钮文案，默认 取消 */
  cancelButtonText?: string;
  /** 取消按钮颜色，默认black */
  cancelButtonColor?: string;
  /** 是否禁用取消按钮，默认false */
  cancelButtonDisabled?: boolean;
  /** 是否展示遮罩层，默认true */
  overlay?: boolean;
  /** 自定义遮罩层类名 */
  overlayClass?: string;
  /** 自定义遮罩层样式， */
  overlayStyle?: CSSProperties;
  /** 是否在页面回退时自动关闭，默认true */
  closeOnPopstate?: boolean;
  /** 是否在点击遮罩层后关闭弹窗，默认false */
  closeOnClickOverlay?: boolean;
  /** 是否允许 message 内容中渲染 HTML，默认false */
  allowHtml?: boolean;
  /** 是否锁定背景滚动，默认true */
  lockScroll?: boolean;
  /** 动画类名，等价于 transition 的 name 属性 */
  transition?: string;
  /** 关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise */
  beforeClose?: (
    action: string,
  ) => Promise<boolean> | boolean | undefined | void;
  /** 指定挂载的节点，等同于 Teleport 组件的 to 属性 */
  teleport?: TeleportProps["to"];
};