ProDialog 弹窗

ProDialog 弹窗 的基础用法、公开 API 与示例。

基础示例

通过 useDialog 打开内容弹窗。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { useDialog } from "@/components/pro/dialog";

const { open } = useDialog();

const openDialog = () => {
  open({
    title: "ProDialog",
    height: 160,
    render: () => "这里是 useDialog 渲染内容",
  });
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <el-button type="primary" @click="openDialog">打开弹窗</el-button>
    </div>
  </ClientOnly>
</template>

隐藏源代码

确认与取消

展示弹窗确认、取消和关闭回调。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { useDialog } from "@/components/pro/dialog";

const { open } = useDialog();
const result = ref("等待操作");

const openDialog = () => {
  open({
    title: "确认资料",
    height: 180,
    confirmText: "通过",
    cancelText: "取消",
    render: () => "确认后会关闭弹窗并更新下方状态。",
    onConfirm: () => {
      result.value = "已确认";
    },
    onCancel: () => {
      result.value = "已取消";
    },
  });
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <el-button type="primary" @click="openDialog">打开确认弹窗</el-button>
      <span class="dialog-result">{{ result }}</span>
    </div>
  </ClientOnly>
</template>

<style scoped>
.dialog-result {
  margin-left: 12px;
  color: #667085;
}
</style>

隐藏源代码

引入方式

import { ProDialog, useDialog } from "@/components/pro/dialog";

Props

参数	说明	类型	默认值	必填
title	顶部标题	string	"弹框"	否
fullscreen	是否默认全屏	boolean	false	否
fullscreenIcon	是否显示渲染全屏图标	boolean	true	否
height	内容高度	string | number	400	否
maxHeight	内容最大高度	string | number	-	否
heightOffsetInFullscreen	全屏时内容高度偏移量	number	0	否
showFooter	是否渲染底部	boolean	true	否
footerAlign	底部对齐方式	"left" | "right" | "center"	"right"	否
confirmLoading	确认按钮 loading	boolean	false	否
confirmText	确认按钮文字	string	"确认"	否
cancelText	关闭按钮文字	string	"关闭"	否
render	自定义内容渲染	() => RenderTypes	-	否
renderHeader	自定义头部渲染	(scope: unknown) => RenderTypes	-	否
footerTopRender	自定义底部上方渲染	() => RenderTypes	-	否
renderFooterBefore	自定义底部前方渲染	(scope: DialogRenderParams) => RenderTypes	-	否
renderFooter	自定义底部渲染	(scope: DialogRenderParams) => RenderTypes	-	否
renderFooterAfter	自定义底部前方渲染	(scope: DialogRenderParams) => RenderTypes	-	否
onConfirm	确认按钮点击事件	(closeDialog: () => void) => unknown	-	否
onCancel	关闭按钮点击事件	(closeDialog: () => void) => unknown	-	否
onFullscreen	全屏切换事件	(isFullscreen: boolean) => void	-	否
visible	控制组件显示或隐藏。	boolean	false	否

Events

事件名	说明	回调参数
cancel	点击取消操作时触发。	-
confirm	点击确认操作时触发。	-
close	关闭时触发。	-
fullscreen	fullscreen 事件触发时回调。	isFullscreen: boolean
update:visible	显示状态更新时触发。	value: boolean

Slots

插槽名	说明	参数
header	头部内容插槽。	-
header-title	header-title 内容插槽。	-
fullscreen-icon	fullscreen-icon 内容插槽。	-

Expose

名称	说明	类型
elDialogInstance	暴露 elDialogInstance 给外部调用。	-
handleConfirm	执行确认操作。	-
handleCancel	执行取消操作。	-
open	打开组件。	-
close	关闭组件。	-

Module API

名称	说明	类型
useDialog	导出 useDialog 供业务侧复用。	(ctx?: ComponentInternalInstance) => unknown

Types

ProDialogProps

导出 ProDialogProps 供业务侧复用。

字段	说明	类型	默认值	必填
title	顶部标题	string	''	否
fullscreen	是否默认全屏	boolean	false	否
fullscreenIcon	是否显示渲染全屏图标	boolean	true	否
height	内容高度	string | number	400	否
maxHeight	内容最大高度	string | number	-	否
heightOffsetInFullscreen	全屏时内容高度偏移量	number	0	否
showFooter	是否渲染底部	boolean	true	否
footerAlign	底部对齐方式	"left" | "right" | "center"	'right'	否
confirmLoading	确认按钮 loading	boolean	false	否
confirmText	确认按钮文字	string	'确认'	否
cancelText	关闭按钮文字	string	'关闭'	否
render	自定义内容渲染	() => RenderTypes	-	否
renderHeader	自定义头部渲染	(scope: unknown) => RenderTypes	-	否
footerTopRender	自定义底部上方渲染	() => RenderTypes	-	否
renderFooterBefore	自定义底部前方渲染	(scope: DialogRenderParams) => RenderTypes	-	否
renderFooter	自定义底部渲染	(scope: DialogRenderParams) => RenderTypes	-	否
renderFooterAfter	自定义底部前方渲染	(scope: DialogRenderParams) => RenderTypes	-	否
onConfirm	确认按钮点击事件	(closeDialog: () => void) => unknown	-	否
onCancel	关闭按钮点击事件	(closeDialog: () => void) => unknown	-	否
onFullscreen	全屏切换事件	(isFullscreen: boolean) => void	-	否

DialogRenderParams

Render 相关函数的参数

字段	说明	类型	默认值	必填
handleConfirm	配置 handleConfirm。	() => void	-	是
handleCancel	配置 handleCancel。	() => void	-	是

ProDialogEmits

导出 ProDialogEmits 供业务侧复用。

字段	说明	类型	默认值	必填
cancel	配置 cancel。	[]	-	是
confirm	配置 confirm。	[]	-	是
close	配置 close。	[]	-	是
fullscreen	配置 fullscreen。	[isFullscreen: boolean]	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。