ProDialog 超级弹框

基础用法

<script setup lang="tsx" name="UseDialogDemo">
import { ref } from "vue";
import { useDialog, ProDialog } from "@/components/pro/dialog";

const visible = ref(false);

const { open } = useDialog();

const openDialog = () => {
  open({
    title: "ProDialog 弹框",
    height: 400,
    render: () => (
      <>
        <el-button onClick={() => againOpenDialog()}>使用函数打开 Dialog</el-button>
      </>
    ),
  });
};

const againOpenDialog = () => {
  open({
    title: "ProDialog 弹框",
    top: "20vh",
    render: () => <div>我被函数再次打开</div>,
  });
};
</script>

<template>
  <el-button @click="openDialog()">函数式打开 Dialog 组件</el-button>

  <el-button @Click="visible = true">组件式打开 Dialog 组件</el-button>

  <ProDialog v-model="visible" height="300">我是通过 modelValue 打开的 Dialog 组件</ProDialog>
</template>

隐藏源代码

Attributes

属性名	说明	类型	默认值
title	顶部标题	string	''
fullscreen	是否默认全屏	boolean	false
fullscreenIcon	是否显示渲染全屏图标	boolean	true
height	内容高度	string / number	400
maxHeight	内容最大高度	string / number	—
heightOffsetInFullscreen	全屏时内容高度偏移量	number	0
showFooter	是否渲染底部	boolean	true
footerAlign	底部对齐方式	string	right
confirmLoading	确认按钮 loading	boolean	false
confirmText	确认按钮文字	string	确认
cancelText	关闭按钮文字	string	关闭
...	其他扩展属性，支持所有 ElDialog Attributes	...	...

函数式弹框独有的属性

属性名	说明	类型	默认值
render	自定义内容渲染	function	—
renderHeader	自定义头部渲染	function	—
footerTopRender	自定义底部上方渲染	function	—
renderFooterBefore	自定义底部前渲染	function	—
renderFooter	自定义底部渲染	function	—
renderFooterAfter	自定义底部后渲染	function	—
onConfirm	确认按钮点击事件	function	—
onCancel	关闭按钮点击事件	function	—
onFullscreen	全屏切换事件	function	—

RenderTypes 类型

渲染函数的返回值的类型

/**
 * 渲染函数的返回值的类型
 */
export type RenderTypes = string | VNode | JSX.Element | Component;

DialogRenderParams 类型

渲染函数的参数类型

/**
 * Render 相关函数的参数
 */
export type DialogRenderParams = {
  handleConfirm: () => void;
  handleCancel: () => void;
};

Events

ProDialog 组件式弹框使用，如果是函数式弹框，请使用上方的 onXxx 事件。

名称	说明	类型
cancel	取消事件	function
confirm	确认事件	function
fullscreen	全屏切换事件	function

Slots

ProDialog 组件式弹框使用，如果是函数式弹框，请使用上方的 renderXxx 事件。

插槽名	说明	作用域插槽参数
header	自定义头部	object
header-title	自定义头部标题	—
fullscreen-icon	自定义全屏图标	object
footer-top	自定义底部上方	—
footer-before	自定义底部前	object
footer	自定义底部	object
footer-after	自定义底部后	object
...	其他扩展属性，支持所有 ElDialog Slots	...

Exposes

ProDialog 组件式弹框使用。

名称	说明	类型
elDialogInstance	el-dialog 组件实例	object
handleConfirm	确认事件处理	function
handleCancel	取消事件处理	function
open	打开弹窗	function
close	关闭弹窗	function