useOverlay

命令式使用弹窗

TIP

需要将ElDialog,ElDrawer,ElOverlay注册为全局组件

基础用法

View Source

<script setup lang="ts">
import { h } from 'vue'
import { ElButton } from 'element-plus'

import { useOverlay } from '.'

const { open: openDialog, close: closeDialog } = useOverlay({
  title: '对话框',
  default: () => h(ElButton, { onClick: () => closeDialog() }, '关闭'),
  // 使用jsx
  // default: ()=> <ElButton onClick={() => close()}>关闭</ElButton>,
})

const { open: openDrawer, close: closeDrawer } = useOverlay({
  title: '抽屉',
  type: 'drawer',
  default: () => h(ElButton, { onClick: () => closeDrawer() }, '关闭'),
})

const { open: openOverlay, close: closeOverlay } = useOverlay({
  type: 'overlay',
  style: 'display:flex;justify-content:center;align-items:center;',
  default: () => h(ElButton, { onClick: () => closeOverlay(0) }, '关闭'),
})
</script>

<template>
  <ElButton type="primary" size="default" @click="openDialog()">
    打开对话框
  </ElButton>

  <ElButton type="primary" size="default" @click="openDrawer()">
    打开抽屉
  </ElButton>

  <ElButton type="primary" size="default" @click="openOverlay()">
    打开覆盖层
  </ElButton>
</template>

UseOverlayOptions

名称	类型	默认值	说明
...dialogProps	DialogProps		ElDialog的属性和事件
...drawerProps	DrawerProps		ElDrawer的属性和事件
...overlayProps	OverlayProps		ElOverlay的属性
type	'dialog' | 'drawer' | 'overlay'	'dialog'	打开弹窗的类型
header	RawChildren		头部插槽
default	RawChildren		中间内容插槽
footer	RawChildren		底部插槽
appContext	AppContext		应用上下文

UseOverlayReturn

名称	类型	说明
open	(options?: UseOverlayOptions) => void	打开弹窗函数
close	(delay?: number) => void	关闭弹窗函数

类型定义

import type { ElDialog, ElDrawer, ElOverlay } from 'element-plus'
import type { AppContext, VNode, VNodeArrayChildren } from 'vue'

export type RawChildren = string | number | boolean | VNode | VNodeArrayChildren | (() => any)
export type UseOverlayType = 'dialog' | 'drawer' | 'overlay'
export interface UseOverlayComponentProps {
  dialog: InstanceType<typeof ElDialog>['$props']
  drawer: InstanceType<typeof ElDrawer>['$props']
  overlay: InstanceType<typeof ElOverlay>['$props']
}

export type UseOverlayOptions<T extends UseOverlayType = 'dialog'> = {
  /**
   * 弹窗方式 'dialog' | 'drawer' | 'overlay'
   * @default 'dialog'
   */
  type?: T
  /** 头部插槽 */
  header?: RawChildren
  /** 中间内容插槽 */
  default?: RawChildren
  /** 底部插槽 */
  footer?: RawChildren
  /** 应用上下文 */
  appContext?: AppContext
  onClose?: () => any
} & UseOverlayComponentProps[T]